单击后CSS更改按钮样式

Question

我想知道是否有一种方法可以在单击css之后更改按钮的样式，而不是element:active。 谢谢！

Answer 1

每个链接都有五种不同的状态：link，hover，active，focus和visited。

Link是正常外观，hover是鼠标悬停时，active是点击后的状态，focus跟随有效，visited是当您解散最近点击的链接时，您最终会得到的状态。

我猜你想要在focus或visited上实现不同的风格，然后你可以添加以下CSS：

a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }

CSS中推荐的顺序不会造成任何问题如下：

a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

您可以使用网络浏览器的开发者工具强制执行此类元素的状态（Chrome-＆gt;开发人员工具/检查元素 - ＆gt;样式 - ＆gt;过滤器：hov）： Force state in Chrome Developer Tools

Answer 2

如果您正在寻找纯CSS选项，请尝试使用：focus伪类。

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}

Answer 3

按钮的代码是什么？如果它是一个标签，那么你可以这样做：

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}

<a href="#">A button</a>

或者你可以使用jQuery在点击时添加一个类，如下所示：

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});

.button-clicked {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>

Answer 4

仅通过选择按钮的active和focus伪元素就可以使用CSS。

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

请参阅codepen：http://codepen.io/fennefoss/pen/Bpqdqx

您还可以编写一个简单的jQuery单击函数来更改背景颜色。

HTML：

<button class="js-click">Click me!</button>

CSS：

button {
  background: none;
}

JavaScript的：

  $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });

查看此codepen：http://codepen.io/fennefoss/pen/pRxrVG

Answer 5

尝试检查按钮焦点上的轮廓：

button:focus {
    outline: blue auto 5px; 
}

如果有，只需将其设置为none。

Answer 6

如果您的按钮是<a>元素，则可以使用:visited选择器。

但您受限制，您只能更改：

• color
• background-color
• border-color（及其子属性）
• outline-color
• 填充和描边属性的颜色部分

我还没有读过this article about revisiting the :visited，但也许有些聪明的人找到了更多方法来破解它。

Answer 7

一种简单的方法是像这样使用JavaScript：

element.addEventListener('click', (e => {
    e.preventDefault();

    element.style = '<insert CSS here as you would in a style attribute>';
}));