Question

有没有办法根据自己的ID将自定义样式应用于特定的bootstrap select控件的下拉菜单？我有一个名为myControl的bootstrap select控件：

<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不是很好，这让我有点疯狂。提前谢谢。

Answer 1

我认为它片段有帮助，我添加了相同的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}

Answer 2

您可以使用其setStyle方法将类添加到特定的selectpicker，例如：

$('.selectpicker').selectpicker('setStyle', 'btn btn-primary');

您还可以添加或删除类，如下所示： https://developer.snapappointments.com/bootstrap-select/methods/

Answer 3

你可以通过使用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>

Answer 4

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

试试这个。

Answer 5

您好我的尝试，看看它是否可以帮助您满足您的要求。

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。

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

5 个答案: