将自定义样式应用于引导选择.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，这是让我有点疯狂。提前致谢。

来源

2017-09-05 Pooja

你能发布你的html吗！ –

我做到了，我希望这就是你的意思..谢谢 – Pooja

我认为这有助于片断和我有同样添加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}

来源

2017-09-05 05:20:14

谢谢。最后设法通过添加.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>

来源

2017-09-05 05:10:00

谢谢。但是这也将样式应用于按钮。我希望能够将其应用于打开的下拉内容，有没有办法做到这一点？ – Pooja

如果您只想在打开下拉菜单时添加。你可以检查更新的答案。 –

非常感谢你，这很有效，但它又一次将更改应用于按钮onclick。最后设法做到这一点，修改一下，并给样式为.myClass .dropdown-menu.open在CSS中。 – Pooja

.bootstrap-select.btn-group [data-id="myControl"] + .dropdown-menu.open { 
width: 250px !important; 
overflow: auto !important; 
background-color: red !important; 
}

尝试。

来源

2017-09-05 05:18:52

不工作，对不起：尝试使用和不使用空格，但样式不适用。如果我删除数据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。

来源

2017-09-05 05:22:38 jhek

谢谢，这工作得太好了，但我不想为选项应用样式我想为整个下拉的事情做这件事，但这很有帮助。 – Pooja

将自定义样式应用于引导选择.dropdown-menu.open

回答

相关问题