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

Tengo un cuadro de selección y estoy intentando cambiar el color de fondo de las opciones cuando se hace clic en el cuadro de selección y se muestran todas las opciones.

body {
  background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}

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

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

Expandir fragmento

Oct 11 '12 16:10 ngplayground

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 aplicar estilo a cada una de las etiquetas... utilice el selector optionCSS :attribute

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>

Expandir fragmento

Oct 11 '2012 09:10 udidu

Sí, puedes configurar esto de la manera opuesta:

select { /* desired background */ }
option:not(:checked) { background: #fff; }

Compruébalo funcionando a continuación:

select {
  margin: 50px;
  width: 300px;
  background: #ff0;
  color: #000;
}

option:not(:checked) {
  background-color: #fff;
}

<select>
  <option val="">Select Option</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>

Expandir fragmento

Mar 20 '2014 10:03 Jaykumar Patel

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 <optgroup>etiqueta junto con una clase para referencias adicionales. 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 tu documento escribe el CSS así:

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

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

Mar 21 '2013 21:03 rfoo

ingrese la descripción de la imagen aquí

Similar a algunas de las respuestas, pero en realidad no se indica, 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 ss arriba).

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

Oct 08 '2013 21:10 dah97765