Cambiar el cuadro de selección, opción de color de fondo

Tengo un cuadro de select e bash cambiar el color de fondo de las opciones cuando se hace clic en el cuadro de select y se muestran todas las opciones.

Ver violín

HTML:

  Please choose Option 1 Option 2 Option 3 Option 4  

CSS:

 select{ margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); } 

Debe colocar background-color en la etiqueta de option y no en la etiqueta de select

 select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } 

Si desea aplicar un estilo a cada una de las tags de option … use el selector de attribute css:

 select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } select option[value="1"] { background: rgba(100, 100, 100, 0.3); } select option[value="2"] { background: rgba(150, 150, 150, 0.3); } select option[value="3"] { background: rgba(200, 200, 200, 0.3); } select option[value="4"] { background: rgba(250, 250, 250, 0.3); } 
  

No sé si lo ha considerado o no, pero si su aplicación se basa en colorear varios grupos de elementos, probablemente debería usar la etiqueta junto con una clase para futuras referencias. Por ejemplo:

  

y luego en la cabecera de su documento, escriba el css así:

  

Sí, puedes configurar esto de manera oppisita usando esto,

 option:not(:checked) { } 

Revisa esta demo jsFiddle

HTML

  

CSS

 select{ margin:40px; background: rgba(0,0,0,0.3); color:#FFF; text-shadow:0 1px 0 rgba(0,0,0,0.4); } option:not(:checked) { background-color: white; color:#000; } 

introduzca la descripción de la imagen aquí

Similar a algunas de las respuestas, pero en realidad no es lo que se dice, es agregar una clase a la etiqueta de opción real y usar clases css … esto actualmente funciona para mí sin problema en IE (ver ss arriba).

  

CSS:

 .greenColor{ background-color: #33CC33; } .redColor{ background-color: #E60000; } 

Si realmente desea diseñar el estilo dentro de un, considere cambiar a un menú desplegable basado en Javascript / CSS como http://getbootstrap.com/2.3.2/components.html#dropdowns o https://silviomoreto.github.io/ bootstrap-select / examples / . Esto se debe a que los navegadores como IE no permiten el estilo de opciones dentro de los elementos . Chrome / OSX también tiene este problema: no puede aplicar opciones de estilo.

Sin embargo, se adjunta una advertencia a ese enfoque. Estos tipos de menús funcionan de manera muy diferente en las plataformas móviles porque los elementos nativos no se utilizan. También pueden tener molestias molestas en el escritorio. Mi consejo es 1) no escribas el tuyo y 2) encuentra una biblioteca que ha sido muy bien probada.

 $htmlIngressCss=''; 

agregue $htmlIngressCss en su porción html 🙂

Simplemente cambia bg color

select { background: #6ac17a; color:#fff; }

Otra opción es usar Javascript:

 if (document.getElementById('selectID').value == '1') { document.getElementById('optionID').style.color = '#000'; 

(No tan limpio como el selector de atributos CSS, pero más potente)

Mis selecciones no colorearían el fondo hasta que agregué! Importante para el estilo.

  input, select, select option{background-color:#FFE !important} 

¡Aquí va lo que he aprendido sobre el tema!

La especificación CSS 2 no abordó el problema de cómo los elementos de formulario deben presentarse a los usuarios.

Lee aquí: revista aplastante

Finalmente , nunca encontrará ningún artículo técnico de w3c u otro dirigido a este tema. El diseño de elementos de formulario en cuadros de selección en particular no es totalmente compatible, sin embargo, puede manejar … ¡con un poco de esfuerzo!

Estilo de elementos de formulario HTML

Construyendo Widgets Personalizados

¡No pierdas tiempo con los hackers e lee los enlaces y aprende cómo los profesionales hacen el trabajo!