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

102

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.

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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?

css html-select Jitendra Vyas
fuente
@ManseUK - No se trata solo <option>del menú desplegable completo
Jitendra Vyas
2
@ManseUK: No estoy seguro de que sea lo mismo. Esa pregunta le pregunta si puede <select>diseñar la apariencia del elemento en la página. Esta pregunta le pregunta si puede diseñar la lista de <option>elementos.
Andy E
13
Por el amor de Dios, esto NO es un duplicado de NINGUNA de las dos preguntas vinculadas (que, por cierto, son diferentes entre sí). Uno se trata únicamente de diseñar el estilo de la selección y no de la opción, mientras que este pregunta también sobre el estilo de las opciones, y el otro no tiene el requisito only-css / no-js.
matteo
12
Estoy harto de ver preguntas marcadas incorrectamente como duplicadas o cerradas incorrectamente, permaneciendo así durante años a pesar de que se ha demostrado que estaban equivocadas.
matteo
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Lambder

Respuestas:

70

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>
Expandir fragmento

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.

Savas Vedova
fuente
3
+1 gracias es un buen código. pero en mi caso quiero hacer con <select>. el uso de <div>es semánticamente incorrecto.
Jitendra Vyas
2
@JitendraVyas, lo sé, pero como respondí, eso no es posible. Lo que ha logrado en la primera imagen es lo máximo que puede hacer. Ver edición. Por cierto, también respondí su pregunta anterior, por favor véala.
Savas Vedova
La parte de 'actualización importante' infiere que puede diseñar optionetiquetas con CSS, pero no puede, solo puede diseñar la selectetiqueta. Que se muestra en esta respuesta
svnm
Aquí hay una versión de JavaScript del ejemplo anterior que agrega devolución de llamada y algunas otras características útiles: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco puffs
4

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

danwellman
fuente
2

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.

cchana
fuente
Elimine el último párrafo: no se puede acceder a la URL en línea.
Kumarharsh