如何为selectmenu（jquery ui:selectmenu）中的选项设置单个样式（css）

我有一个html表单：选择

<select id = 'myselect'>
<option value = '1'>1</option>
<option value = '2'>2</option>
...
<option value = 'N'>N</option>
</select>

我需要一个盒子有自己的风格

怎么做？设置id，类不起作用：

我认为我应该做以下几点：

1创建“经典”选择表单的html代码

2将创建的“经典”选择表单连接到jquery ui

3在jquery ui中查找元素选择菜单如何

4设置为找到元素新类名

---

5将css用于类名

这在API主题下讨论

selectmenu小部件使用jQueryUICSS框架设计其外观。如果需要selectmenu特定的样式，以下CSS类名可用于覆盖或作为“类”选项的键：

ui selectmenu button：替代页面上本机selectmenu的类似按钮的元素。关闭时ui selectmenu按钮关闭类，打开时ui selectmenu按钮打开类

ui selectmenu text：表示按钮元素文本部分的范围。 ui selectmenu图标：selectmenu按钮内的图标。 ui selectmenu菜单：菜单周围的包装元素，用于向用户显示选项，而不是菜单本身。菜单打开时，将添加ui selectmenu open类。 ui selectmenu optgroup：从本机选择复制元素的元素之一。 此示例显示了其中一些：

使用一个更基本的例子，我们可以通过CSS选择和设计独特的项目。原始的选择元素被隐藏。创建一个无组织的列表，以供使用。我们可以使用适当的jQuery或CSS选择器选择第一个列表项：ui-id-1或.ui菜单项：first child div

您没有提供您已经尝试或正在尝试完成的示例。下面是一个非常基本的例子：

HTML

JavaScript

---

如果你编辑你的帖子并添加更多细节，我可以提供更多的信息。我希望这能帮助您找到解决方案。

多谢您的指导

决定：

$.widget( "ui.selectmenu", $.ui.selectmenu, {
    _my_render: function( item ) {          
        return $("<div" + ((item.element[0].attributes.my_level == undefined) ? ("") : (" class = '_my_class'")) + ">" + item.label + "</div>");
    },

    _renderItem: function( ul, item ) {

        return $( "<li>" )
            .append(this._my_render(item))
            .appendTo(ul);
    },
});

---

您好，您描述了更改所有selectmenu组件的selectmenu视图的全局属性，例如所有选项元素的样式，例如下拉列表中所有项目的字体参数。但是我需要能够为下拉列表的特定选项指定单独的样式。例如：选项1选项2粗体选项3选项4选项5.ui菜单项：第一个子项-特殊情况，因为什么样的选项应该是不同的样式可以动态设置

<label for="number">Select a number</label>
<select name="number" id="number">
  <option>1</option>
  <option selected="selected">2</option>
  <option>3</option>
  ...
  <option>19</option>
</select>

.ui-menu-item:first-child {
  font-weight: bold;
}

$(function() {
  $("#number")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("overflow");
});

$.widget( "ui.selectmenu", $.ui.selectmenu, {
    _my_render: function( item ) {          
        return $("<div" + ((item.element[0].attributes.my_level == undefined) ? ("") : (" class = '_my_class'")) + ">" + item.label + "</div>");
    },

    _renderItem: function( ul, item ) {

        return $( "<li>" )
            .append(this._my_render(item))
            .appendTo(ul);
    },
});