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.

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.

• javascript
• css

• Can you post your html too! – Alireza Fattahi Commented Sep 5, 2017 at 4:59
• I did, I hope that's what you meant..thanks – Pooja Commented Sep 5, 2017 at 5:03

5 Answers 5

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./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./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}

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

try this.

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.

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./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./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>

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./bootstrap-select/methods/