css - 样式 Bootstrap 表按钮 - btn-primary dropdown-toggle

Question

我怎样才能完全设置 Bootstrap 表按钮的样式，目前按钮保持蓝色，并将鼠标悬停在我的表按钮上只能使按钮的一半颜色成为我想要的颜色，我想要按钮黑色(#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，您应该能够覆盖这些设置。这是因为这些 Bootstrap 使用线性渐变，它是背景图像并且将位于顶部。因此，您需要覆盖此属性才能看到您的颜色。您还可以使用 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; 
}