css – 引导按钮点击显示默认颜色

前端之家收集整理的这篇文章主要介绍了css – 引导按钮点击显示默认颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用以下代码来设置按钮颜色,颜色工作,直到我点击按钮,按钮显示默认颜色,如何指定按钮onclick的颜色?
.btn-success { 
 color: #ffffff; 
 background-color: #161617; 
 border-color: #494F57; 
} 

.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success { 
 color: #ffffff; 
 background-color: #1F2838; 
 border-color: #494F57; 
} 

.btn-success:active,.open .dropdown-toggle.btn-success { 
 background-image: none; 
} 

.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active { 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success .badge { 
  color: #161617; 
 background-color: #ffffff; 
}

解决方法

主动选择器是您点击需要的。
.btn-sample:active {
  // click styles here
}

如果您仍然看到稍微不同的颜色,那么它看起来像上面那样,因为它也是适用于活动按钮状态的盒子阴影。如此禁用:

.btn-sample:active {
  Box-shadow: none;
}

编辑:
超越你的css的选择器实际上是btn-success:active:focus。所以你需要添加以下内容到你的css中:

.btn-success:active:focus {
  color: #ffffff; 
  background-color: #161617; 
  border-color: #494F57;
}

进一步下面我的评论,你最好创建自己的类,如btn-custom,您可以应用所需的样式。结合现有的btn类,您可以实现您所需的结果少得多的代码,因为您不需要覆盖现有的选择器。

原文链接:https://www.f2er.com/css/218666.html

猜你在找的CSS相关文章