Як стилізувати <варіант> лише за допомогою CSS?

Примітка. Це питання не стосується створення спеціального спаду. Йдеться лише про можливості стильових <option>елементів у виділеному елементі в 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 також?

EDIT 2015 трав

Відмова: Я взяв фрагмент із відповіді, зв'язаної нижче:

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

Крім WebKit, станом на Firefox 35 ми зможемо використовувати appearanceвластивість:

Використовуючи -moz-appearanceзі noneзначенням на комбобоці тепер видаліть спадну кнопку

Отже, для того, щоб приховати стиль за замовчуванням, це так само просто, як додати наступні правила до нашого елемента вибору:

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

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

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

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