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
Select Blue Red Green Yellow Brown
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?
EDICIÓN 2015 mayo
Descargo de responsabilidad: he tomado el fragmento de la respuesta vinculada a continuación:
Además de WebKit, a partir de Firefox 35 podremos usar la propiedad de appearance
:
Al utilizar
-moz-appearance
con el valornone
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; }
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.