Стилизация выпадающего списка <select>

400

11 апреля 2017, 08:26

Не могу никак добиться нужной стилизации выпадающего списка . Перелопатил интернет - только варианты с плагинами jquery. Неужели нет CSS селекторов? select>option селектор мне ничего не дал...

Answer 1

Простейший вариант:

     <select>
      <option>Пункт 1</option>
      <option>Пункт 2</option>
    </select>
    <!-- CSS -->
    select:first-child{
    color:red;
    font: bold 14px Georgia, serif;
      background:#CCC;
    }

Или стилизовать только option:

option {
color:red;
font: bold 14px Georgia, serif;
  background:#CCC;
}

Можно сделать option, к примеру, полосатым (striped) - бывает удобно, когда много элементов.

option:nth-child(even) {
color:red;
font: bold 14px Georgia, serif;
  background:#CCC;
}

Все примеры и еще один - тут http://codepen.io/anon/pen/qrzwxM

О поддержке браузерами и прочем можно прочитать тут -http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript/