Come modellare l '<opzione> con solo CSS?

Nota: questa domanda non riguarda la creazione di un menu a discesa personalizzato. Si tratta solo di possibilità di applicare stili agli <option>elementi all'interno dell'elemento select in CSS

Come posso definire lo stile <option>di un <select>elemento con compatibilità cross-browser? Conosco molti modi JavaScript che personalizzano il menu a discesa in cui convertire <li>, di cui non sto chiedendo nulla.

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

Chiedo cosa potrebbe essere possibile solo con CSS, con compatibilità per IE9 +, Firefox e Chrome.

Voglio uno stile in questo modo o il più vicino possibile.

Ho provato qui http://jsfiddle.net/jitendravyas/juwz3/3/ , ma Chrome non mostra alcuno stile tranne il colore del carattere, mentre Firefox ne mostra altri. Come far funzionare il bordo e il riempimento anche in Chrome?

EDIT 2015 maggio

Dichiarazione di non responsabilità: ho preso lo snippet dalla risposta collegata di seguito:

Aggiornamento importante!

Oltre a WebKit, a partire da Firefox 35 saremo in grado di utilizzare la appearanceproprietà:

Usando -moz-appearancecon il nonevalore su una casella combinata ora rimuovi il pulsante a discesa

Quindi ora, per nascondere lo stile predefinito, è facile come aggiungere le seguenti regole sul nostro elemento di selezione:

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

Per il supporto di IE 11, puoi utilizzare [::-ms-expand ] [15].

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

Vecchia risposta

Sfortunatamente quello che chiedi non è possibile utilizzando CSS puro. Tuttavia, ecco qualcosa di simile che puoi scegliere come soluzione. Controlla il codice live di seguito.

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>

MODIFICARE

Ecco la domanda che hai posto tempo fa. Come applicare uno stile a un menu a discesa <select> con CSS solo senza JavaScript? Come dice lì, solo in Chrome e in una certa misura in Firefox puoi ottenere ciò che desideri. Altrimenti, sfortunatamente, non esiste una soluzione CSS pura cross browser per lo styling di una selezione.

Non esiste un modo cross-browser per definire gli elementi delle opzioni, certamente non nella misura del tuo secondo screenshot. Potresti essere in grado di renderli in grassetto e impostare la dimensione del carattere, ma questo sarà tutto ...

Ho già giocato con elementi selezionati e senza sovrascrivere la funzionalità con JavaScript, non credo sia possibile in Chrome. Sia che utilizzi un plug-in o scrivi il tuo codice, solo CSS è un no go per Chrome / Safari e come hai detto, Firefox è più bravo a gestirlo.