CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
jones
jones

Reputation: 625

Change styling for specific jQuery UI object (selectmenu) and not all

I have two selectmenus. I want to change the look and feel of one of them. This is what I tried so far: Add two selects then within the style tag, i tried to change the class ui-selectmenu-button and ui-selectmenu-text for only select1 but no luck. 

// JS
<script>
$("#select1").selectmenu();
$("#select2").selectmenu();
</script>

 // HTML
<select id="select1">     
<option value="1"> 1 </option>
</select>
<select id="select2">   
<option value="2"> 2 </option>  
</select>

// CSS
<style>   
#select1 .ui-selectmenu-button{     
    background: rgb(12,27,37);   
}   

#select1 .ui-selectmenu-text{   
   color: white;   
} 
</style>

If i simply do the thing below, it will work but change all the jquery ui selectmenus and i only want it to work for select1 in this example.

<style>
.ui-selectmenu-button{  
    background: rgb(12,27,37);   
}  
</style>

Upvotes: 1

Views: 891

Answers (1)

JasperZelf
JasperZelf

Reputation: 2844

You can target it using the Adjacent sibling connector.

#select1+.ui-selectmenu-button{  
   background: rgb(12,27,37);     
}

Since the #select1 element will be hidden, but still be preceding the code generated by jQuery UI, you can target it with the '+' sign in CSS.

https://jsfiddle.net/jkrielaars/vadt8neh/

Upvotes: 2

Related Questions