¿Cómo diseñar la solo con CSS?

Nota: Esta pregunta no se trata de hacer un menú desplegable personalizado. Solo se trata de posibilidades de diseñar elementos dentro del elemento seleccionado en CSS

¿Cómo puedo diseñar s de un elemento con compatibilidad entre navegadores? Conozco muchas formas de JavaScript que personalizan el menú desplegable para convertirlo en

, lo que no estoy preguntando.

  Select Blue Red Green Yellow Brown

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

enter image description here

Quiero estilo así o lo más cerca posible.

enter image description here

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

EDICIÓN 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 propiedad de appearance :

Al utilizar -moz-appearance con el valor none en un cuadro combinado ahora se elimina el botón desplegable

Entonces, para ocultar el estilo predeterminado, es tan fácil como agregar las siguientes reglas en nuestro elemento seleccionado:

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

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

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

Vieja respuesta

Desafortunadamente lo que preguntas no es posible usando CSS puro. Sin embargo, aquí hay algo similar que puedes elegir como una 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; }

  Select  Item 1
 Item 2
 Item 3

No existe una manera de elementos de opciones de estilo entre navegadores, ciertamente no en la medida de su segunda captura de pantalla. Podrías ponerlos en negrita y establecer el tamaño de la 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 plugin o escribas tu propio código, CSS es un no ir para Chrome / Safari y como dijiste, Firefox es mejor para lidiar con él.