Applying custom style to bootstrap select .dropdown-menu.open

Question

Is there a way to apply custom styles to a particular bootstrap select control's dropdown menu based on its id? I have a bootstrap select control called 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>

when I click on it and the dropdown opens, I want to apply some custom styles using css. I can do it generically by using:

.bootstrap-select.btn-group .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}

But this applies the style to all the bootstrap select controls in my application. I want to be able to do it for one particular control. I tried giving the id:

#myControl .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}

But it doesn't work. Sorry if it is a stupid question, I am not very good with javascript and css and this is driving me a bit crazy. Thanks in advance.

Answer 1

i think it snippet helps and i have add same 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

Hi try mine and see if it helps you with your requirement.

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 .

Answer 3

You can add classes to an specific selectpicker using its setStyle method, for example:

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

you can also add or remove classes, as pointed out here: https://developer.snapappointments.com/bootstrap-select/methods/

Answer 4

You can do it by adding a class to it using jquery. Check below snippet for reference. Hope it helps.

 $('#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 5

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

try this.