как набор индивидуальных стилей (CSS) для варианта в selectmenu (JQuery-Ui: selectmenu)

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 имеет свой стиль

как это сделать? установить идентификатор, класс не работает :(

Я думаю, что я должен сделать следующее:

1) создать HTML-код «классической» выберите форму

2) Регистрация создана «классический» выберите форма для Jquery-интерфейса

3) найти элемент в JQuery-Ui selectmenu (КАК?)

4) установлен на найденный элемент класса имя-новому

5) использовать CSS для класса

Answer 1

Это обсуждается в API: http://api.jqueryui.com/selectmenu/ под Theming.

Виджет selectmenu использует фреймворк jQuery UI CSS для стилизации его внешнего вида. Если selectmenu специфический стиль необходимо, следующие имена классов CSS можно использовать для переопределения или в качестве ключей для варианта классов:

• ui-selectmenu-button: Кнопка-подобный элемент замены родной selectmenu на этой странице. Имеет класс при закрытии, класс ui-selectmenu-button-open при открытии.

  • ui-selectmenu-text: Пробел, представляющий текстовую часть элемента кнопки.
  • ui-selectmenu-icon: Значок в кнопке выбора.
• 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"); 
}); 

Если вы редактируете сообщение и добавляете более подробную информацию, я могу предоставить немного больше информации. Надеюсь, вам это поможет.

Answer 2

Извилистые, большое спасибо за направление идеи в

решения:

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