Как стилизовать <option> только с помощью CSS?

102

Примечание. Этот вопрос не касается создания настраиваемого раскрывающегося списка. Речь идет только о возможностях стилизации <option>элементов в элементе select в CSS.

Как я могу <option>стилизовать <select>элементы с кросс-браузерной совместимостью? Я знаю много способов JavaScript, которые настраивают раскрывающийся список для преобразования <li>, о которых я не спрашиваю.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Я спрашиваю, что может быть возможно только с CSS, с совместимостью с IE9 +, Firefox и Chrome.

введите описание изображения здесь

Я хочу стиль такой или как можно более близкий.

введите описание изображения здесь

Я пробовал здесь http://jsfiddle.net/jitendravyas/juwz3/3/ , но Chrome не показывает никаких стилей, кроме цвета шрифта, а Firefox показывает еще кое-что. Как заставить работать границы и отступы в Chrome?

css html-select Джитендра Вьяс
источник
@ManseUK - это только <option>не все выпадающая
Jitendra Виас
2
@ManseUK: Я не уверен, что это то же самое. Этот вопрос спрашивает, можете ли вы <select>стилизовать внешний вид элемента на странице. Этот вопрос спрашивает, можете ли вы стилизовать список <option>элементов.
Энди Э
13
Ради бога, это НЕ дубликат ЛЮБОГО из двух связанных вопросов (которые, кстати, отличаются друг от друга). Один касается только стиля select, а не параметра, в то время как этот спрашивает также о стилизации параметров, а другой не имеет требования only-css / no-js.
matteo
12
Мне надоело видеть вопросы, ошибочно помеченные как повторяющиеся или ошибочно закрытые, оставаясь таковыми в течение многих лет, несмотря на то, что они оказались неверными.
matteo
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Лэмбдер

Ответы:

70

ИЗМЕНИТЬ 2015 Май

Отказ от ответственности: я взял фрагмент из ответа, приведенного ниже:

Важное обновление!

В дополнение к WebKit, начиная с Firefox 35, мы сможем использовать appearanceсвойство:

Используя -moz-appearanceсо noneзначением в поле со списком, теперь удалите кнопку раскрывающегося списка

Итак, теперь, чтобы скрыть стиль по умолчанию, достаточно просто добавить следующие правила в наш элемент select:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Для поддержки IE 11 вы можете использовать [ ::-ms-expand] [15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Старый ответ

К сожалению, то, о чем вы просите, невозможно при использовании чистого CSS. Однако есть нечто похожее, что вы можете обойти. Проверьте живой код ниже.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
Развернуть фрагмент

РЕДАКТИРОВАТЬ

Вот вопрос, который вы задали некоторое время назад. Как оформить раскрывающийся список <select> только с помощью CSS без JavaScript? Как там сказано, только в Chrome и в некоторой степени в Firefox вы можете добиться того, чего хотите. В противном случае, к сожалению, не существует кроссбраузерного чистого CSS-решения для стилизации выбора.

Савас Ведова
источник
3
+1 спасибо, хороший код. но в моем случае я хочу обойтись <select>. использование <div>семантически некорректно.
Джитендра Вьяс
2
@JitendraVyas, я знаю, но, как я ответил, это невозможно. То, что вы достигли на первой картинке, - это максимум, на что вы способны. См. Редактирование. Кстати, я ответил и на ваш предыдущий вопрос, посмотрите, пожалуйста.
Савас Ведова
Часть «важное обновление» предполагает, что вы можете стилизовать optionтеги с помощью css, но не можете, вы можете только стилизовать selectтег. Что показано в этом ответе
svnm
Вот версия приведенного выше примера на JavaScript, которая добавляет обратный вызов и некоторые другие полезные функции: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco puffs
4

Не существует кроссбраузерного способа стилизации элементов опций, конечно, не в той мере, в какой на вашем втором снимке экрана. Вы могли бы сделать их полужирными и установить размер шрифта, но это все ...

Danwellman
источник
2

Раньше я экспериментировал с некоторыми элементами и не отменял функциональность с помощью JavaScript, я не думаю, что это возможно в Chrome. Независимо от того, используете ли вы плагин или пишете свой собственный код, только CSS не подходит для Chrome / Safari, и, как вы сказали, Firefox лучше справляется с этим.

чана
источник
Удалите последний абзац - URL-адрес недоступен в Интернете.
kumarharsh