Задать стиль для одного пункта SELECT

#css3

Есть выпадающий список и нужно задать отступы, верхнюю границу только для одного
пункта из всего списка. Присвоила класс, работает только бекграунд. Задаю границу,
отступы, ничего не отображается.



.non-eu {
  background:#ccc;
  border-top:1px solid red;
  padding-top:10px;
}

  Select Your country...
  Albania
  Austria
  Belgium
  Bosnia And Herzegovina
  Non-EU
  




Как можно решить?
    

Ответы

Ответ 1

По-умолчанию выпадающий список в селекте рендерится операционной системой. Это позволяет,
например, на мобильных устройствах показывать список селекта вместо экранной клавиатуры.

Через CSS стилизовать можно только само поле стандартного селекта, список - нельзя.

Однако можно подключить js-библиотеку для селекта. Например, select2. Она заменяет
стандартный инпут-селект своей реализацией, и ее - можно стилизовать в CSS.

В версии 4.0 select2 - отдельная опция стилизуется так:

function template(result, container) {
  var option_class = $(result.element).attr('class');
  if (option_class) {
    $(container).addClass(option_class);
  }
  return result.text;
};

$(document).bind('ready', function() {
  $('.js-select2').select2({
    templateResult: template
  });
});


В функции template мы проверяем, задан ли класс у стандартного option у селекта,
и, если да - применяем этот класс к опции select2.