将自定义样式应用于引导选择.dropdown-menu.open
有没有一种方法可以将自定义样式应用到特定引导选择控件的下拉菜单中,该选择是基于它的ID?我有一个引导选择控件调用myControl:将自定义样式应用于引导选择.dropdown-menu.open
<select name="named[]" class="selectpicker show-tick dropup"
data-dropupAuto="true"
data-container="#mainContainer"
id="myControl" data-width="90%" title="Select your data"></select>
当我点击它,并且下拉打开,我想用CSS应用某些自定义样式。我可以做到这一般使用:
.bootstrap-select.btn-group .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}
但这适用于我的应用程序中的所有引导选择控件的样式。我希望能够为一个特定的控制做到这一点。我试着给ID:
#myControl .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}
但它不起作用。对不起,如果这是一个愚蠢的问题,我不是很好的JavaScript和CSS,这是让我有点疯狂。提前致谢。
我认为这有助于片断和我有同样添加CSS
.myClass {
color: red; width:200px;
}
.myClass option { background:#000; color:#fff}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="named[]" class="selectpicker myClass show-tick dropup" data-dropupAuto="true" data-container="#mainContainer" id="myControl" data-width="90%" title="Select your data">
<option>Hi</option>
<option>Hello</option>
</select>
.myClass {
color: red; width:200px;
}
.myClass option { background:#000; color:#fff}
谢谢。最后设法通过添加.myClass .dropdown-menu .open { width:250px!important; overflow:auto!important; }选择这个作为接受的答案,因为它与我所做的最接近 – Pooja
你可以通过使用jquery添加一个类来实现。检查下面的代码片段以供参考。希望能帮助到你。
$('#myControl').click(function() {
$(this).toggleClass('myClass');
});
.myClass {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="named[]" class="selectpicker show-tick dropup" data-dropupAuto="true" data-container="#mainContainer" id="myControl" data-width="90%" title="Select your data">
<option>Hi</option>
<option>Hello</option>
</select>
.bootstrap-select.btn-group [data-id="myControl"] + .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}
尝试。
不工作,对不起:尝试使用和不使用空格,但样式不适用。如果我删除数据ID,它可以工作..arghh – Pooja
喜试矿山,看看它是否有助于你与你的要求。
HTML:
<select class="form-control" id="sel1">
<option class="mystyle">1</option>
<option class="mystyle">2</option>
<option class="mystyle">3</option>
<option class="mystyle">4</option>
CSS:
.mystyle{
color: red;
}
的jsfiddle here。
谢谢,这工作得太好了,但我不想为选项应用样式我想为整个下拉的事情做这件事,但这很有帮助。 – Pooja
你能发布你的html吗! –
我做到了,我希望这就是你的意思..谢谢 – Pooja