logo标签列表

点击按钮后修改CSS样式。

cssbuttonstyling
66
我想知道是否有一种方法可以在按钮被单击后，在 css 中更改其样式，而不是使用 element:active。
你能否在这里粘贴代码并提供更多的解释？ - Pramod Kharade
你可以添加一个jQuery函数，在单击时向按钮添加额外的类。 - CalvT
9个回答
95

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

#style  {
    background-color: red;
}

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

每个链接有五种不同的状态：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 -> 开发者工具 / 检查元素 -> 样式 -> 过滤器 :hov）: 在Chrome开发者工具中强制修改状态

在大多数情况下，使用锚标签的:visited状态将是具有已点击状态的按钮的最干净的仅CSS实现。您还可以重新利用复选框:checked http://jsfiddle.net/4hrzf39g/2/，但我认为这有点过了。 - luckyape
“焦点跟随活动”并不是非常清晰。 - bharal
15

仅通过选择按钮的活动和焦点伪元素，就可以使用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

14

尝试在按钮聚焦时检查大纲：

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

如果您拥有它，请将其设置为none。

1
这是唯一对我起作用的解决方案。边框属性不够，需要使用轮廓来解决问题。 - BrianLegg
8
你的按钮代码是什么？如果它是一个a标签，你可以这样做： 

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}
<a href="#">A button</a>

您可以使用jQuery在单击时添加一个类，如下所示：

或者您可以在单击时使用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>

4

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

但是，您只能更改以下内容：

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

我没有阅读有关重新访问:visited的文章，但也许一些更聪明的人已经找到了更多的黑客方法。

2

对于hover、focus等，所有答案都是正确的... 如果你想在点击时改变背景颜色并保持该点击状态，可以这样做：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
  <script>
    const element = document.querySelector("body")
    let taskDone = false
   
    // function for show button
    const elementShow = () => {
      element.innerHTML = `
        <button id="done-button" style="background-color : ${!taskDone 
          ? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
          ${!taskDone ? "Done" : "not done yet"}
        </button>
        `
    }
    elementShow()

    // click Done button
    const doneTask = () => {
      taskDone = (taskDone ? false : true)
      elementShow()
    }
  </script>
</html>

2
一个简单的方法是使用JavaScript，如下所示：
element.addEventListener('click', (e => {
    e.preventDefault();

    element.style = '<insert CSS here as you would in a style attribute>';
}));
1
你可以使用:focus来实现。 

.button {
  border: 1px solid black;
}

.button:focus {
  border: 1px solid red;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接