jQuery selectmenu如何对某些选项进行样式设置 [英] JQuery selectmenu how to style some options differently

问题描述

可能是一个简单的家伙，但是我真的很努力.如果有人可以提供帮助或建议，我将不胜感激.

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.

我正在使用JQuery selectmenu，而我想要做的就是为具有特定类的任何OPTION设置不同的样式.该类是缺货"，因此我的代码如下；

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>

我只希望第二个具有class ="outOfStock"的选项的样式设置为不同的文本或BG颜色.

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>

感谢任何指针，谢谢.

推荐答案

感谢所有建议，其中一些建议部分起作用，但是，这似乎在不同的浏览器中都能保持一致的工作，并且还涵盖处于SELECTED状态的项目

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 */

此技巧可能会帮助尝试查找.ui样式的人... 我花了AGES来计算各种菜单状态(打开，悬停，选定)中涉及的.ui样式-最后，我意识到我所要做的就是打开Chrome(或Firefox)，设置Firebug，右键单击我的元素(在本例中为我的选择菜单项)，然后选择检查元素".然后，Firebug向我展示了所有的演奏风格.然后，我可以清楚地看到样式随着菜单项处于其各种状态，悬停，选定等而改变.一旦您知道要定位的样式/类，其余的就很容易了.希望这对其他人有帮助.抢救萤火虫:)

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 :)

这篇关于jQuery selectmenu如何对某些选项进行样式设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！