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

puntos suspensivos css varias lineas

Question

Posible duplicado:
¿Cómo se hace un estilo de menú desplegable <select> con css solo sin javascript?
Html Seleccione las opciones de cuadro en Hover?

Nota: Esta pregunta no se trata de hacer un menú desplegable personalizado. Solo se trata de posibilidades de diseñar elementos <option> con CSS

¿Cómo puedo diseñar <option> s de un elemento <select> con compatibilidad entre navegadores? Conozco muchas formas de JavaScript que personalizan el menú desplegable para convertirlo en <li> , lo que 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>

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

Quiero estilo así o lo más cerca 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 algo más. ¿Cómo funciona el borde y el relleno en Chrome también?

Answer 1

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.

Answer 2

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 ...

Answer 3

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; }

<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 hiciste hace un 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 quieres. De lo contrario, desafortunadamente, no hay una solución CSS cruzada para el diseño de estilos.