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

Question

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>

Please change the selectors to: #select1.ui-selectmenu-button, without space between them, if the class and the id are related to one element. — Nadezhda Serafimova
– Nadezhda Serafimova, Commented Mar 30, 2017 at 10:15
@NadezhdaSerafimova jquery UI will not add a class to the <select>. It will hide the select and add it's generated HTML after it. Therefore the adjacent connector should be used. See my answer below. — JasperZelf
– JasperZelf, Commented Mar 30, 2017 at 10:24

JasperZelf · Accepted Answer · 2017-03-30 10:18:36Z

2

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/

answered Mar 30, 2017 at 10:18

JasperZelf

2,8441 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jones Over a year ago

bonus question in case you know, how to style the drop down when the select button is pressed. any ideas? my initial thought was #select1+.ui-selectmenu-menu{ background: rgb(12,27,37); } but that didn't work

JasperZelf Over a year ago

bonus answer: Turns out that the select-menu's have an ID that can be related to the ID of the original element. Try this: #select1-menu{ border: 3px solid blue; } #select1-menu li{ background: green; } jsfiddle.net/jkrielaars/vadt8neh/1

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related