我正在尝试设置 boostrap-select 小部件的样式,但失败了。我尝试了以下代码,但它不会更改 selectpicker 选择框中的背景和文本颜色:
<select id="what" class="wia-filter-value selectpicker show-tick">
<option selected>All</option>
<option>Events</option>
<option>Man Made</option>
<option>Nature</option>
</select>
我的 CSS 看起来像这样:
select {
width: 200px;
height: 30px;
background-color: #141414 !important;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.selectpicker{
width: 200px;
height: 30px;
background-color: #141414 !important;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand { /* for IE 11 */
display: none;
}
.wia-filter-value {
width: 200px;
height: 30px;
background-color: #141414 !important;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 6px;
}
此 CSS 成功应用了左边框颜色,但未应用背景颜色或文本颜色。
注意:解决方案在 stackoverflow 中显示在 enter link description here用于标准 Boostrap 选择。我正在使用来自 https://silviomoreto.github.io/bootstrap-select 的选择器小部件.该解决方案似乎不适用于 selectpicker,或者至少我无法让它工作。
最佳答案
您需要定位插件正在应用的Bootstrap-select 类。如果您检查该元素,您可以看到发生了什么。这是一个屏幕截图,供您引用所应用的内容。
工作示例:
body {
padding-top: 50px;
}
.bootstrap-select {
max-width: 200px;
}
.bootstrap-select .btn {
background-color: #141414;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-weight: 200;
padding: 12px 12px;
font-size: 16px;
margin-bottom: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.bootstrap-select .dropdown-menu {
margin: 15px 0 0;
}
select::-ms-expand {
/* for IE 11 */
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div class="container text-center">
<select id="what" class="form-control selectpicker show-tick">
<option selected>All</option>
<option>Events</option>
<option>Man Made</option>
<option>Nature</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于css - 设置 Bootstrap select 的 selectpicker 版本的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40960505/