3

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

.non-eu {
  background:#ccc;
  border-top:1px solid red;
  padding-top:10px;
}
<select>
  <option>Select Your country...</option>
  <option>Albania</option>
  <option>Austria</option>
  <option>Belgium</option>
  <option>Bosnia And Herzegovina</option>
  <option class="non-eu">Non-EU</option>
 </select> 

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

0

1 ответ 1

5

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

Через 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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.