Question

Probably a simple one guys but I’m really struggling with it. Would really appreciate some help or advice if anyone can offer it, thanks.

I’m using JQuery selectmenu and all I would like to do is set a different style for any OPTION that has a particular class. The class is “outofstock”, so my code is as follows;

<select name="dd1" id="dd1">
    <option value="1">item 1</option>
    <option value="2" class="outOfStock">item 2</option>
    <option value="3">item 3</option>
</select>

I would just like the second option that has class=”outOfStock”, to be styled with a different text or BG colour.

I have tried many (many, MANY) variations on this but just cannot get anything to work.

<style type="text/css">
.ui-selectmenu-menu-item .outOfStock{background:red;}
</style>

Any pointers would be appreciated, thanks.

Answer 1

Thanks for all the suggestions, some of which worked partially, however this seems to do a consistent job across different browsers AND also covers the item in its SELECTED state

.ui-selectmenu-menu .outOfStock{background:red;} /* item in the list */
.outOfStock .ui-selectmenu-status{background:red;color:#333}  /* item when selected */

This tip might help someone trying to find .ui styles…
It took me AGES to work out which .ui styles were involved during various menu states (open, hover, selected) – in the end I realised all I had to do was open Chrome (or Firefox), set Firebug going, right click my element (in this case my select-menu item) and choose “inspect Element”. Firebug then showed me all the styles as they came in to play. I could then clearly see the styles change as the menu item was in its various states, hover, selected etc. Once you know the styles/classes to target, the rest is easy..hope this helps someone else. Firebug to the rescue 🙂