有没有办法根据其 id 将自定义样式应用于特定引导选择控件的下拉菜单?我有一个名为 myControl 的引导选择控件:
<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}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句