更改引导按钮的颜色

这是一个愚蠢的问题，因为我觉得我应该知道答案，并认为我的代码可以完成这项工作。更改引导按钮的颜色

但我使用bootstrap，我试图将btn btn-primary类从默认蓝色更改为其他。

这里是我的html：

<input type="text" class="form-control" placeholder="Search by user name, member type, genre..."> 
         <span class="input-group-btn"> 
          <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button> 
         </span>

我的CSS：

.btn btn-primary:hover, 
.btn btn-primary:focus, 
.btn btn-primary:active, 
.btn btn-primary.active { 
    color: #ffffff; 
    background-color: pink; 
    border-color: pink; 
}

但它仍然是这样的：

来源

2017-10-11 J.G.Sable

为什么不创建自定义btn而不是重写引导默认颜色？ –

由于btn股同级车中相同的元素名为btn-primary，您的CSS选择器HOULD样子

.btn.btn-primary:hover, 
 
.btn.btn-primary:focus, 
 
.btn.btn-primary:active, 
 
.btn.btn-primary.active { 
 
    color: #ffffff; 
 
    background-color: pink; 
 
    border-color: pink; 
 
}

来源

2017-10-11 21:15:53

谢谢！这改变了它的悬停，但如何定期改变它。 –

您应该在当前列表中添加另一个选择器，匹配'.btn.btn-primary {}'。很高兴我能帮上忙！ –

确保您的倍率加载后默认的引导，或者如果你正在使用NPM和自己编译，请确保您的变量覆盖在引导后放置默认

在bootstrap.css（BS4）

BTN-主类被定义为如下：（注意，这是没有必要前言这些类与.btn.btn-伯，只是.btn伯..以前的答案实际上并不正确，但因为特异性而起作用。 :-)

.btn-primary { 
 
    color: #fff; 
 
    background-color: #007bff; 
 
    border-color: #007bff; 
 
} 
 

 
.btn-primary:hover { 
 
    color: #fff; 
 
    background-color: #0069d9; 
 
    border-color: #0062cc; 
 
} 
 

 
.btn-primary:focus, .btn-primary.focus { 
 
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); 
 
} 
 

 
.btn-primary.disabled, .btn-primary:disabled { 
 
    background-color: #007bff; 
 
    border-color: #007bff; 
 
} 
 

 
.btn-primary:active, .btn-primary.active, 
 
.show > .btn-primary.dropdown-toggle { 
 
    background-color: #0069d9; 
 
    background-image: none; 
 
    border-color: #0062cc; 
 
}

如果您填写所有这些出你的主题，只是一定的引导做负载后，你的主题变化。

来源

2017-10-11 21:26:14 WebDragon

更改引导按钮的颜色

回答

相关问题