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

129

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);
}
ngplayground
fuente

Respuestas:

164

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>

udidu
fuente
Quité la opción rgba y parece que ahora uso el negro, lo que hará :)
ngplayground
55
Podrías usar el :nth-child(1..n)selector CSS en su lugar.
Samuel Liew
2
Probablemente no deberías usar el selector de atributos. Probablemente quiera usar el n-ésimo hijo o dar a cada opción una clase en su lugar.
Fred
3
No funciona en Firefox, ni en Chromium (Linux Antergos)
albert
Intenta agregar !imporant. Por ejemplo:background: red!important;
michal
19

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>
rfoo
fuente
16

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;
}
Jay Patel
fuente
@aswzen en realidad en Chrome funciona para mí (v65) pero no en Firefox Quantum (v59).
CPHPython
7

ingrese la descripción de la imagen aquí

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;
}
dah97765
fuente
3

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

    input, select, select option{background-color:#FFE !important}
Bob Brunius
fuente
2

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.

Charlie Dalsass
fuente
1

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

obinoob
fuente
1

Simplemente cambie el color bg

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

Thomas Mathew
fuente
0

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)

Travis
fuente
0
$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 :)

Chintan
fuente