¿Cómo diseñar la <opción> con solo CSS?

Nota: esta pregunta no se trata de crear un menú desplegable personalizado. Solo se trata de posibilidades de <option>elementos de estilo dentro del elemento seleccionado en CSS

¿Cómo puedo <option>diseñar un <select>elemento con compatibilidad entre navegadores? Conozco muchas formas de JavaScript que personalizan el menú desplegable para convertir <li>, sobre las cuales no estoy preguntando.

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

Estoy preguntando qué podría ser posible solo con CSS, con compatibilidad para IE9 +, Firefox y Chrome.

Quiero tener un estilo así o lo más parecido posible.

Intenté aquí http://jsfiddle.net/jitendravyas/juwz3/3/ , pero Chrome no muestra ningún estilo excepto el color de fuente, mientras que Firefox muestra algunos más. ¿Cómo hacer que el borde y el relleno funcionen también en Chrome?

EDITAR 2015 Mayo

Descargo de responsabilidad: he tomado el fragmento de la respuesta vinculada a continuación:

¡Actualización importante!

Además de WebKit, a partir de Firefox 35 podremos usar la appearancepropiedad:

Usar -moz-appearancecon el nonevalor en un cuadro combinado ahora elimina el botón desplegable

Entonces, ahora para ocultar el estilo predeterminado, es tan fácil como agregar las siguientes reglas en nuestro elemento de selección:

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

Para compatibilidad con IE 11, puede utilizar [ ::-ms-expand] [15].

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

Respuesta antigua

Desafortunadamente, lo que pides no es posible usando CSS puro. Sin embargo, aquí hay algo similar que puede elegir como solución alternativa. Verifique el código en vivo a continuación.

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>

EDITAR

Aquí está la pregunta que hizo hace algún tiempo. ¿Cómo diseñar un menú desplegable <select> con CSS solo sin JavaScript? Como dice allí, solo en Chrome y hasta cierto punto en Firefox puedes lograr lo que deseas. De lo contrario, desafortunadamente, no existe una solución CSS pura entre navegadores para diseñar una selección.

No existe una forma cruzada de navegador para diseñar elementos de opciones, ciertamente no en la medida de su segunda captura de pantalla. Es posible que pueda ponerlos en negrita y establecer el tamaño de fuente, pero eso será todo ...

He jugado con elementos seleccionados antes y sin anular la funcionalidad con JavaScript, no creo que sea posible en Chrome. Ya sea que uses un complemento o escribas tu propio código, CSS solo no es válido para Chrome / Safari y, como dijiste, Firefox es mejor para manejarlo.