Как оформить <option>только CSS?

Question

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

Как мне оформить <option> s элемента <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?

Answer 1

РЕДАКТИРОВАТЬ 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>

EDIT

Вот вопрос, который вы задали некоторое время назад. Как оформить выпадающий список

Answer 2

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

Answer 3

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