Q:

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

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.

A:

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}

