突出显示“已推送”和“禁用”状态的按钮

【问题标题】：Highlighting buttons for "pushed" and "disabled" status突出显示“已推送”和“禁用”状态的按钮
【发布时间】：2015-09-14 12:48:00
【问题描述】：

在我的代码中，我有三个按钮 (input type="button") 用于选择不同的 div。它们就像切换按钮（开/关）。

在过去，我使用图像来显示按钮被按下或重置，但我现在想用 css 来做。我只是不确定如何达到效果。

它还需要在选择按钮时禁用边框突出显示。

我已经寻找了这方面的例子，但什么也没找到。

编辑：

好的。我现在有一些东西可以展示。该代码在一定程度上起作用。当我按住鼠标按钮时，它显示出沮丧的样子，但一旦我松开它就会恢复正常而不是保持沮丧。

我已删除不属于此问题的无关代码以避免混淆。

编辑 2：

我注意到（在 FireFox 中，不确定其他浏览器）按钮的默认外观在单击按钮时显示为沮丧的外观，但在释放鼠标按钮时恢复正常。我想在松开鼠标按钮后保持沮丧的表情，直到第二次单击该按钮，或单击另一个按钮。

      input:hover { color: teal; }
      .push:active { background: gray; color: aquamarine; }
      .push:inactive { background: white; color: teal; }
      <INPUT type="button" class="push" style="font-weight: bold;">
      <INPUT type="button" class="push" style="font-weight: bold;">
      <INPUT type="button" class="push" style="font-weight: bold;">

最终编辑：

感谢所有帮助我解决此问题的人。我已经为我的目的找到了更好的解决方案。下面是代码的最终版本。在这个版本中，我只是在单击按钮时更改字体颜色，单击一次时更改字体颜色，单击其他按钮或再次单击相同按钮时更改为黑色。我在 javascript 中做这一切。在修复中，我的翻转突出显示坏了，修复是使用 onMouseOver 和 onMouseOut 而不是在头部的样式标签中使用 :hover 。有趣的是，当我将它粘贴到 sn-p 运行器中并将 javascript 与 html 分开时，它似乎不想工作。

鼠标悬停有效，但当我将鼠标移开时，所选按钮不显示青色字母。不管怎样，代码就在这里，给想玩的人。`

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Sample Solution Page</TITLE>
    <SCRIPT type="text/javascript">
    <!--
      function visInvis(id,id1,id2,id3,id4,id5,id6) {

        var a = document.getElementById('mySol');
        var a1 = document.getElementById('MM');
        var a2 = document.getElementById('MP');
        var a3 = document.getElementById('MBL');
        var a4 = document.getElementById('MBC');
        var a5 = document.getElementById('MPS');
        var a6 = document.getElementById('MPL');

        var b = document.getElementById('YASS');
        var b1 = document.getElementById('YM');
        var b2 = document.getElementById('YP');
        var b3 = document.getElementById('YBL');
        var b4 = document.getElementById('YBC');
        var b5 = document.getElementById('YPS');
        var b6 = document.getElementById('YPL');

        var c = document.getElementById('Tak');
        var c1 = document.getElementById('TM');
        var c2 = document.getElementById('TP');
        var c3 = document.getElementById('TBL');
        var c4 = document.getElementById('TBC');
        var c5 = document.getElementById('TPS');
        var c6 = document.getElementById('TPL');

        var d;
        var d1 = document.getElementById('MS');
        var d2 = document.getElementById('YS');
        var d3 = document.getElementById('TS');

        var e = document.getElementById(id);
        var e1 = document.getElementById(id1);
        var e2 = document.getElementById(id2);
        var e3 = document.getElementById(id3);
        var e4 = document.getElementById(id4);
        var e5 = document.getElementById(id5);
        var e6 = document.getElementById(id6);

        if(e == a && e.style.display == 'none') {
          d = d1;
          b.style.display = 'none';
          b1.style.display = 'none';
          b2.style.display = 'none';
          b3.style.display = 'none';
          b4.style.display = 'none';
          b5.style.display = 'none';
          b6.style.display = 'none';
          d2.style.color = 'black';

          c.style.display = 'none';
          c1.style.display = 'none';
          c2.style.display = 'none';
          c3.style.display = 'none';
          c4.style.display = 'none';
          c5.style.display = 'none';
          c6.style.display = 'none';
          d3.style.color = 'black';
        }

        if(e == b && e.style.display == 'none') {
          d = d2;
          a.style.display = 'none';
          a1.style.display = 'none';
          a2.style.display = 'none';
          a3.style.display = 'none';
          a4.style.display = 'none';
          a5.style.display = 'none';
          a6.style.display = 'none';
          d1.style.color = 'black';

          c.style.display = 'none';
          c1.style.display = 'none';
          c2.style.display = 'none';
          c3.style.display = 'none';
          c4.style.display = 'none';
          c5.style.display = 'none';
          c6.style.display = 'none';
          d3.style.color = 'black';
        }

        if(e == c && e.style.display == 'none') {
          d = d3;
          a.style.display = 'none';
          a1.style.display = 'none';
          a2.style.display = 'none';
          a3.style.display = 'none';
          a4.style.display = 'none';
          a5.style.display = 'none';
          a6.style.display = 'none';
          d1.style.color = 'black';

          b.style.display = 'none';
          b1.style.display = 'none';
          b2.style.display = 'none';
          b3.style.display = 'none';
          b4.style.display = 'none';
          b5.style.display = 'none';
          b6.style.display = 'none';
          d2.style.color = 'black';
        }

        if(e == a && e.style.display == 'block')
          d = d1;
        if(e == b && e.style.display == 'block')
          d = d2;
        if(e == c && e.style.display == 'block')
          d = d3;

        if(e.style.display == 'block') {
          e.style.display = 'none';
          e1.style.display = 'none';
          e2.style.display = 'none';
          e3.style.display = 'none';
          e4.style.display = 'none';
          e5.style.display = 'none';
          e6.style.display = 'none';
          d.style.color = 'black';
        }
        else {
          e.style.display = 'block';
          e1.style.display = 'block';
          e2.style.display = 'block';
          e3.style.display = 'block';
          e4.style.display = 'block';
          e5.style.display = 'block';
          e6.style.display = 'block';
          d.style.color = 'teal';
        }
      }

      function selectText(divID) //divID contains actual id of ‘div’ element
      {
        var textC=document.getElementById(divID);
        if (document.selection)
        {
          //Portion for IE
          var div = document.body.createTextRange();
          div.moveToElementText(textC);
          div.select();
        }
        else
        {
          //Portion for FF
          var div = document.createRange();
          div.setStartBefore(textC);
          div.setEndAfter(textC);
          window.getSelection().addRange(div);
        }
      }
    -->
    </SCRIPT>
  </HEAD>
  <BODY>
    <TABLE style="float: left; vertical-align: top; width: 17%;">
      <TR><TH style="text-align: left; width: 65%;">Collection:</TH><TH style="width: 35%;">Revenge</TH></TR>
      <TR><TH style="text-align: left;">Level #:</TH><TH style="width: 30%;">1</TH></TR>
      <TR><TH style="text-align: left; vertical-align: top; height: 49.5pt;" colspan="2">Puzzle Name</TH></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD>Width:</TD><TH style="width: 30%;">0</TH></TR>
      <TR><TD>Height:</TD><TH style="width: 30%;">0</TH></TR>
      <TR><TD>Boxes/Goals:</TD><TH style="width: 30%;">0</TH></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=MS
        style="font-weight: bold;" onMouseOver="this.style.color='teal'"
        onMouseOut="this.style.color='black'"
        onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL');
        selectText('mySol');" value="My Solution"></TD></TR>
      <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=YS
        style="font-weight: bold;" onMouseOver="this.style.color='teal'"
        onMouseOut="this.style.color='black'"
        onClick="visInvis('YASS','YM','YP','YBL','YBC','YPS','YPL');
        selectText('YASS');" value="YASS Solution"></TD></TR>
      <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=TS
        style="font-weight: bold;" onMouseOver="this.style.color='teal'"
        onMouseOut="this.style.color='black'"
        onClick="visInvis('Tak','TM','TP','TBL','TBC','TPS','TPL');
        selectText('Tak');" value="Takaken Solution"></TD></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD>Moves:</TD><TH style="width: 30%;">
        <DIV id=MM style="display: none;">0</DIV>
        <DIV id=YM style="display: none;">0</DIV>
        <DIV id=TM style="display: none;">0</DIV></TH></TR>
      <TR><TD>Pushes:</TD><TH style="width: 30%;">
        <DIV id=MP style="display: none;">0</DIV>
        <DIV id=YP style="display: none;">0</DIV>
        <DIV id=TP style="display: none;">0</DIV></TH></TR>
      <TR><TD>Box lines:</TD><TH style="width: 30%;">
        <DIV id=MBL style="display: none;">0</DIV>
        <DIV id=YBL style="display: none;">0</DIV>
        <DIV id=TBL style="display: none;">0</DIV></TH></TR>
      <TR><TD>Box changes:</TD><TH style="width: 30%;">
        <DIV id=MBC style="display: none;">0</DIV>
        <DIV id=YBC style="display: none;">0</DIV>
        <DIV id=TBC style="display: none;">0</DIV></TH></TR>
      <TR><TD>Pushing sessions:</TD><TH style="width: 30%;">
        <DIV id=MPS style="display: none;">0</DIV>
        <DIV id=YPS style="display: none;">0</DIV>
        <DIV id=TPS style="display: none;">0</DIV></TH></TR>
      <TR><TD>Pusher lines:</TD><TH style="width: 30%;">
        <DIV id=MPL style="display: none;">0</DIV>
        <DIV id=YPL style="display: none;">0</DIV>
        <DIV id=TPL style="display: none;">0</DIV></TH></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD colspan="2">Inactive button means no solution available. Some puzzles YASS cannot solve,
        some Takaken cannot solve, and some I have not solved.</TD></TR>
    </TABLE>
    <TABLE style="float: right; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
      width: 42%; height: 650px;">
      <CAPTION style="align: top; text-align: left; font-weight: bold;">Solution</CAPTION>
      <TR><TD style="vertical-align: top;">
        <DIV id=mySol style="display: none; width: 520px; height: 640px; word-wrap: break-word;
          overflow: auto;">My Solution</DIV>
        <DIV id=YASS style="display: none; width: 520px; height: 640px; word-wrap: break-word;
          overflow: auto;">YASS Solution</DIV>
        <DIV id=Tak style="display: none; width: 520px; height: 640px; word-wrap: break-word;
          overflow: auto;">Takaken Solution</DIV>
      </TD></TR>
    </TABLE>
    <TABLE style="float: center; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
      width: 40.3%; height: 650px;">
      <CAPTION style="align: top; text-align: left; font-weight: bold;">Puzzle</CAPTION>
      <TR><TD>
        <PRE style="text-align: center;"></PRE>
      </TD></TR>
    </TABLE>
  </BODY>
</HTML>

`

【问题讨论】：

  • 请添加您尝试过的代码。如果可能的话，也添加一个小提琴。
  • 更明确。请向我们展示一些有关您要实现的目标的示例。我不知道你在“过去”做了什么。
  • 我当时使用的代码已经很久没有我拥有了。我要回到原来的 geocities days 和 html 2.0/3.2。我没有任何例子可以给你看。至于我所尝试的，我唯一尝试过（并且有效）是在鼠标指针悬停在按钮上时更改文本颜色： input:hover { color:teal; } 在头部的样式标签中。我不知道足够的 css 知道还有什么可以尝试的。我希望按钮在单击一次时看起来很压抑，并在再次单击时恢复正常。
  • 你正在尝试做这样的事情tympanus.net/Tutorials/CSSClickEvents/index.html ??
  • 差不多，但是按钮需要改变，而不是目标文本。

标签： css forms button


【解决方案1】：

我想您正在寻找的是一种在单击按钮时更改按钮外观的方法。

您可以做的是在您的 css 样式表上创建两个 css 类，一个用于活动按钮，另一个用于非活动按钮。

您的页面以处于确定状态的按钮开始，因此您使用对应的类来创建它们

在您的客户端代码中，当单击按钮时，您只需将其具有的类名称从活动更改为非活动，反之亦然。

等等你的样式会在按钮被点击时应用

【讨论】：

  • 我想我明白这一点，所以我会尝试一下，看看我得到了什么。如果它不起作用，至少我会有一个例子来展示。
【解决方案2】：

如果您想要一个纯粹的 HTML 和 CSS 解决方案，您实际上可以使用一个看起来像按钮的复选框。像这样的：

HTML

<input type="checkbox" id="input"/>
<label for="input" id="button">Push me</label>

CSS

input { 
    display: none;
}

#button {
    border: 3px solid #52A7D3;
    background-color: #52A7D3;
    color: #000000;
}


#input ~ #button:active, #input:checked ~ #button{
    background-color: grey;
}

#button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border: 1px solid #999999;
  border-radius: 3px;
}

我制作了一个 jsFiddle 来展示它：http://jsfiddle.net/p0z88ysu/

【讨论】：

  • 这无疑是一个竞争者，但我很难接受。这么小的任务需要这么多的 CSS。我希望有一个更简单的方法来做到这一点。最理想的情况是，我想利用当前按住鼠标按钮的效果。如果这在第二次单击该按钮或单击另一个按钮之前一直有效，那将是完美的。另外，如果需要达到效果，我不介意使用一些javascript。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-09-27
  • 1970-01-01
  • 2023-03-09
  • 1970-01-01
  • 1970-01-01
  • 2019-10-23
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode