我正在使用bootstrap按钮类,更具体地说是以下内容：
<button type="button" class="btn btn-success navbar-btn">Login</button>
现在,颜色呈现绿色,很好.每次我点击按钮,按钮变成深绿色.我想要的是使按钮不会改变颜色,但只保留默认的自举颜色,并删除它周围的蓝色轮廓.
对于蓝色轮廓,我尝试将轮廓设置为无,但由于某种原因它不起作用.我知道我们必须使用
.btn : active:focus {
}
但是我不知道bootstrap成功按钮的默认颜色,所以我很难弄清楚它.
解决方法
btn-success的默认颜色是#5cb85c.您所要做的就是使用DevTools检查它或搜索引导样式表以查找与此类相关的所有规则,并在您自己的样式表中更改所需的任何内容以覆盖它们.不需要使用！重要的是,特异性是你的朋友.见
MDN Specificity.
请参阅工作代码段(此示例将所有状态更改为相同的基本颜色,同样也删除了Box-shadow属性.您应该可以从此处更改所需的任何内容.)
.btn.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn.btn-success.focus,.btn.btn-success:focus {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
Box-shadow: none;
}
.btn.btn-success:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
Box-shadow: none;
}
.btn.btn-success.active,.btn.btn-success:active {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
}
.btn.btn-success.active.focus,.btn.btn-success.active:focus,.btn.btn-success.active:hover,.btn.btn-success:active.focus,.btn.btn-success:active:focus,.btn.btn-success:active:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
Box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="btn btn-success navbar-btn">Changed BTN</button>
<button type="button" class="btn btn-info navbar-btn">Default BTN</button>
</div>
</div>
</nav>
