Question

我有一个html表单：选择

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

对于漂亮的绘图，我使用jquery-ui

$('#myselect').selectmenu();

我需要第1盒有自己的风格

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

我认为我应该做以下事情：

1）创建＆＃39; classic＆＃39;的html代码选择表格

2）加入创造的经典＆＃39;选择表格到jquery-ui

3）在jquery-ui selectmenu中找到元素（怎么样？）

4）设置找到元素new class-name

5）使用css作为类名

Answer 1

扭曲，非常感谢你的想法

决定：

$.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);
    },
});

Answer 2

这在API中讨论：主题下的http://api.jqueryui.com/selectmenu/。

selectmenu小部件使用jQuery UI CSS框架来设置其外观样式。如果需要selectmenu特定样式，则以下CSS类名称可用于覆盖或作为classes选项的键：



ui-selectmenu-button：类似按钮的元素替换页面上的原生选择菜单。关闭时ui-selectmenu-button-closed课程，打开时ui-selectmenu-button-open课程。


ui-selectmenu-text：表示按钮元素的文本部分的范围。

ui-selectmenu-icon：selectmenu按钮中的图标。



ui-selectmenu-menu：菜单周围的包装元素，用于向用户显示选项（而不是菜单本身）。菜单打开时，会添加ui-selectmenu-open类。

ui-selectmenu-optgroup：从原生选区中复制<optgroup>个元素的元素之一。

此示例显示了其中一些内容：https://jqueryui.com/selectmenu/#custom_render

使用更基本的示例，我们可以通过CSS选择和设置唯一项目的样式。隐藏了原始select元素。创建一个无组织列表<ul>来代替使用。我们可以使用适当的jQuery或CSS选择器选择第一个列表项：#ui-id-1或.ui-menu-item:first-child div。

您尚未提供您尝试过的内容或尝试完成的内容的示例。这是一个非常基本的例子：https://jsfiddle.net/Twisty/vgm3txh6/

<强> HTML

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

<强> CSS

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

<强>的JavaScript

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

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

如何在selectmenu中设置个别样式（css）选项（jquery-ui：selectmenu）

2 个答案: