如何在CSS中为点击的按钮添加样式

Question

我查看了W3Schools的网站，该网站解释了如何使用CSS样式化按钮。当按下按钮时，我需要指定一个按钮样式。请问此处应该使用哪个伪类选择器？例如，hover按钮是什么？

我查看了 W3Schools 的网站，该网站解释了如何使用CSS样式化按钮。当点击按钮时，我需要指定一个按钮样式。这种情况下，应该使用哪个伪类选择器呢？例如，hover状态下按钮的样式是：

.button:hover{ 
}

- user7945230

---

w3schools不是W3C。 - j08691

请查看:focus。 - PeterMader

:focus 不等同于 click，您可以在点击后获得焦点。 - Vivick

使用:active伪类选择器。 - the_mishra

:active 是您正在搜索的内容 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active - Pascal Goldbach

Answer 1

这个按钮初始颜色为黄色。当鼠标悬停时，它将变成橙色。当你点击它时，它会变成红色。我使用了:hover和:focus来适应样式。(通常使用:active选择器用于链接 (即标签))

button{
  background-color:yellow;
}

button:hover{background-color:orange;}

button:focus{background-color:red;}

a {
  color: orange;
}

a.button{
  color:green;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:active {
  color: blue;
}

<button>
Hover and Click!
</button>
<br><br>

<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>

- Rachel Gallen

---

:active 通常用于链接（即<a>标签）。 - Rachel Gallen

由于一些常见的库通常并且在我看来很差地使用.button来为样式化为按钮的锚链接（我在看着你，bootstrap），而且OP在示例中使用了.button，因此也许可以将其扩展到包括带有:active的锚点部分？也就是说，如果他们想要一个按钮，他们应该使用<button></button>，但这不是你的错 :) - Mark Schultheiss

@MarkSchultheiss 我实际上没有注意到问题中的这一点，你指出得很好。但是，如果需要一个按钮，为什么不使用button标签呢？我将编辑答案以包含一个class为button的链接... - Rachel Gallen

根据 Mozilla 的文档，按钮也应该使用 :active。https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active - Niraj

必须使用“active”而不是“focus”。单击按钮后，焦点仍然存在，而活动状态仅在鼠标按下时存在。 - Qwerty

Answer 2

如果您只想在鼠标按下时使按钮具有不同的样式，您可以使用:active伪类。

.button:active {
}

如果您希望在点击后保留样式，那么您将需要使用JavaScript。

- Alexandros Panagiotakis

Answer 3

按钮有三种状态：

• 正常状态：您可以像这样选择 button
• 悬停状态：您可以像这样选择 button:hover
• 按下/点击状态：您可以像这样选择 button:active

正常状态：

.button
 {
     //your css
 }

活动的

 .button:active
{
        //your css
}

悬停效果

 .button:hover
{
        //your css
}

片段：

使用 :active 来为按钮的激活状态添加样式。

button:active{
   background-color:red;
}

<button>Click Me</button>

- Nadir Laskar

Answer 4

很遗憾，不存在`:click`伪选择器。如果您想在点击时更改样式，应使用Jquery / JavaScript。这肯定比纯HTML / CSS的“hack”更好。但是如果您坚持...

input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
  background: #444;
  color: #fff;
}

  <label for="input">
  <input id="input" type="radio" />
  <span>NO JS styling</span>
  </label>

Or, if you prefer, you can toggle the styling:

input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
  background: #444;
  color: #fff;
}

  <label for="input">
  <input id="input" type="checkbox" />
  <span>NO JS styling</span>
  </label>

- Chesswithsean

---

为什么在我看来复选框和单选框类型比按钮更好呢？ - Mark Schultheiss

@Mark Schultheiss，你不理解，如果你运行代码片段，也许你就会明白了。复选框是隐藏的，但你可以利用:checked伪选择器，但必须要有复选框输入才能使用。正如我在帖子中提到的，这是一种“hack”。然而，没有其他纯CSS/HTML的替代方案。 - seanysean

Answer 5

button:hover 只有在鼠标悬停在按钮上时才会触发。
尝试使用 button:active 替代...同样适用于其他元素

button:active{
  color: red;
}

- priyank bhardwaj