css - 突出显示 "pushed"和 "disabled"状态的按钮

标签 css forms button

在我的代码中，我使用了三个按钮(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 中完成这一切的。在修复中，我的翻转 highlite 坏了，修复是使用 onMouseOver 和 onMouseOut 而不是在头部的样式标签中使用 :hover 。有趣的是，当我将它粘贴到代码片段运行程序并将 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>

`

最佳答案

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

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

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

在您的客户端代码中，当一个按钮被点击时，您只需将它的类名从 active 更改为 inactive，反之亦然。

Et voilá 单击按钮时将应用您的样式

关于css - 突出显示 "pushed"和 "disabled"状态的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32565233/

上一篇：html - CSS 样式未在 Web 浏览器中更新

下一篇：javascript - 使用按钮展开div，然后将页面滚动到该div

相关文章：

button - flutter中如何识别点击了哪个按钮

jquery - 如何更改文本区域中的单个字符颜色

尝试创建 Button 时抛出 JavaFX InitationTargetException

jquery - simpleimagecheckbox 垂直对齐

forms - 将公式添加到 Gravity Forms 表单

reactjs - Material-UI AutoComplete 表单中的 freeSolo

javascript - 无法使用 JavaScript 显示隐藏字段的更改值

c# - 在 Telegram Bot 中制作一个内联键盘按钮，指向一个 URL C#

html -::在将内容放入无花果标题之前，有什么办法可以避免这种情况吗？

css - Safari 7.0 CSS 转换缓慢

©2024 IT工具网  联系我们