Question

如何完全设置引导表按钮的样式，目前按钮保持蓝色并且悬停在我的表格按钮上只会使按钮的一半成为我想要的颜色，我希望按钮变黑（＃282828）然后稍微轻一些徘徊或活跃。

问题底部的JSFiddle

我的表格是由javascript生成的

 function bootstrapTableStateHandler(origin, msg, type) {
    console[type]("[bootstrapTable." + origin + "]", msg)
}
 var $table = $('#results');
         $table.bootstrapTable({
              url: 'getresults.php',
              search: true,
              buttonsClass: 'primary',
              showFooter: false,
              minimumCountColumns: 2,
              columns: [{
                  field: 'results',
                  title: 'results',
                  sortable: true,
              }, ....So on and so forth

表格中显示了下拉

<table id="results" data-show-columns="true" data-show-toggle="true"></table>

我尝试使用下面的CSS设置所有样式并且按钮保持蓝色，当我将鼠标悬停在它上面时，只有一半按钮变黑 - 虽然轮廓确实变黑了 - 抱歉这么多CSS

.btn-primary { 
  color: #ffffff !important; 
  background-color: #282828 !important; 
  border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

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

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #1F1B1B; 
  border-color: #282828 !important; 
} 

.btn-primary .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}
.dropdown-toggle { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  color: #ffffff; 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

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

.dropdown-toggle.disabled, 
.dropdown-toggle[disabled], 
fieldset[disabled] .dropdown-toggle, 
.dropdown-toggle.disabled:hover, 
.dropdown-toggle[disabled]:hover, 
fieldset[disabled] .dropdown-toggle:hover, 
.dropdown-toggle.disabled:focus, 
.dropdown-toggle[disabled]:focus, 
fieldset[disabled] .dropdown-toggle:focus, 
.dropdown-toggle.disabled:active, 
.dropdown-toggle[disabled]:active, 
fieldset[disabled] .dropdown-toggle:active, 
.dropdown-toggle.disabled.active, 
.dropdown-toggle[disabled].active, 
fieldset[disabled] .dropdown-toggle.active { 
  background-color: #282828 !important; 
  border-color: #282828 !important; 
} 

.dropdown-toggle .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}

我需要样式以强制表格按钮为黑色（＃282828）查看页面的输出，检查时按钮称为btn btn-primary dropdown-toggle

谢谢

JSfiddle

Answer 1

如果您使用background代替background-color，则应该可以覆盖设置。这是因为这些引导程序使用的是线性渐变，它们是背景图像并且将位于顶部。因此，您需要覆盖此属性才能看到颜色。您也可以使用background-image: none和background-color: #282828，但只需使用background: #282828即可完成工作，而且管理工作较少。

https://jsfiddle.net/bonez0607/0qkubms6/

.btn-primary { 
  color: #ffffff !important; 
  background: #282828; 
  border-color: #292730; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: #ffffff; 
  background: #484848; 
  border-color: #282828 !important; 
} 

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

.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: #1F1B1B; 
  border-color: #282828; 
} 

.btn-primary .badge { 
  color: #1F1B1B; 
  background-color: #282828 !important; 
}
.dropdown-toggle { 
  color: #ffffff; 
  background: #282828; 
  border-color: #292730; 
} 

.dropdown-toggle:hover, 
.dropdown-toggle:focus, 
.dropdown-toggle:active, 
.dropdown-toggle.active, 
.open .dropdown-toggle.dropdown-toggle { 
  color: #ffffff; 
  background: #484848; 
  border-color: #282828 !important; 
}

Answer 2

我试图复制这个问题。我想出了这段代码：https://jsfiddle.net/gemkzwva/。它解释了代码中发生的事情。

<input id="field_22Travel" class="check-box" name="field_22Travel" value="Travel" disabled="disabled" type="checkbox">

<button></button> <button id="fixed"></button> button{ height: 50px; width: 100px; background-image: linear-gradient(red, blue);/*bootstrap-theme behaviour*/ } button:hover{ background-position: 0 25px;/*bootstrap-theme behaviour*/ } #fixed:hover{ background-position: 0; /*override background-position */ background-image: none; /*remove the bootstrap-theme image/linear-gradient*/ background-color: green; }和background-image的行为由bootstrap-theme.min.css文件中的.btn-primary类触发。所以你可以：

删除该主题。
进行适当的覆盖。
删除btn-primary类并在您自己的代码中创建一个自定义类。

样式引导表按钮 - btn-primary下拉切换

2 个答案: