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

Tengo un selectcuadro y estoy tratando de cambiar el color de fondo de las opciones cuando selectse hace clic en el cuadro y muestra todas las opciones.

Ver violín

HTML:

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS:

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

Necesitas poner background-colorla optionetiqueta y no la selectetiqueta ...

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 diseñar cada una de las optionetiquetas ... use el attributeselector 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);
}

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

No sé si lo has considerado o no, pero si tu aplicación se basa en colorear varios grupos de elementos, probablemente deberías usar la <optgroup>etiqueta junto con una clase para hacer más referencias. Por ejemplo:

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

y luego en el encabezado de su documento escriba el CSS de esta manera:

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

Sí, puede configurar esto de manera oppisite usando esto,

option:not(:checked) { }

Mira esto demo jsFiddle

HTML

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

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

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

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS:

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

Mis selecciones no colorearán el fondo hasta que agregue! Importante al estilo.

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

Si realmente desea darle estilo a, 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 diseño de opciones dentro de elementos . Chrome / OSX también tiene este problema: no puede diseñar opciones.

Sin embargo, se adjunta una advertencia a ese enfoque. Estos tipos de menús funcionan de manera muy diferente en plataformas móviles porque no se utilizan elementos nativos. También pueden tener peculiaridades molestas en el escritorio. Mi consejo es 1) no escriba el suyo propio y 2) encuentre una biblioteca que haya sido realmente bien probada.

¡Aquí va lo que aprendí sobre el tema!

¡La especificación CSS 2 no abordó el problema de cómo se deben presentar los elementos de formulario a los usuarios!

Lea aquí: revista sensacional

Eventualmente , 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 conducir ... ¡con algo de esfuerzo!

Estilo de elementos de formulario HTML

Crear widgets personalizados

¡No pierdas el tiempo con piratas informáticos, como leer los enlaces y aprender cómo los profesionales hacen el trabajo!

Simplemente cambie el color bg

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)

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

agregue $htmlIngressCssen su porción html :)