单击后 CSS 更改按钮样式

CSS change button style after click

提问by JohnyNich

I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active. Thanks!

我想知道是否有办法更改按钮的样式，在 css 中，在单击后，而不是element:active. 谢谢！

采纳答案by Mark

If you're looking for a pure css option, try using the :focus pseudo class.

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

#style  {
    background-color: red;
}

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

回答by MrD

Each link has five different states: link, hover, active, focusand visited.

每个环节有五个不同的状态：link，hover，active，focus和visited。

Linkis the normal appearance, hoveris when you mouse over, activeis the state when it's clicked, focusfollows active and visitedis the state you end up when you unfocus the recently clicked link.

Link是正常外观，hover是鼠标悬停active时的状态，是单击时的状态，是focus活动状态，visited是在您取消对最近单击的链接的关注时最终的状态。

I'm guessing you want to achieve a different style on either focusor visited, then you can add the following CSS:

我猜您想在focus或上实现不同的样式visited，然后您可以添加以下CSS：

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

A recommended order in your CSS to not cause any trouble is the following:

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

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

You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov): Force state in Chrome Developer Tools

您可以使用 Web 浏览器的开发人员工具来强制元素的状态，如下所示 (Chrome->Developer Tools/Inspect Element->Style->Filter :hov): Force state in Chrome Developer Tools

回答by Matú? ??astny

Try to check outline on button's focus:

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

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

If you have it, just set it to none.

如果你有它，只需将其设置为none.

回答by CalvT

What is the code of your button? If it's an a tag, then you could do this:

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

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

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

Or you could use jQuery to add a class on click, as below:

或者您可以使用 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>

回答by Mikkel Fennefoss

It is possible to do with CSS only by selecting active and focus pseudo element of the button.

仅通过选择按钮的活动和焦点伪元素就可以使用 CSS。

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

See codepen: http://codepen.io/fennefoss/pen/Bpqdqx

见代码笔：http://codepen.io/fennefoss/pen/Bpqdqx

You could also write a simple jQuery click function which changes the background color.

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

HTML:

HTML：

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

CSS:

CSS：

button {
  background: none;
}

JavaScript:

JavaScript：

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

Check out this codepen: http://codepen.io/fennefoss/pen/pRxrVG

看看这个代码笔：http://codepen.io/fennefoss/pen/pRxrVG

回答by Paul van den Dool

If your button would be an <a>element, you could use the :visitedselector.

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

You are limited however, you can only change:

但是，您是有限的，您只能更改：

• color
• background-color
• border-color (and its sub-properties)
• outline-color
• The color parts of the fill and stroke properties

• 颜色
• 背景颜色
• 边框颜色（及其子属性）
• 轮廓颜色
• 填充和描边属性的颜色部分

I haven't read this article about revisiting the :visitedbut maybe some smarter people have found more ways to hack it.

我还没有读过这篇关于重新访问的文章，:visited但也许一些更聪明的人已经找到了更多破解它的方法。