html - poner - ¿Cómo cambiar el color de fondo de la opción del cuadro de selección?

imagen de fondo html

Question

Tengo un cuadro de selección e intento cambiar el color de fondo de las opciones cuando se hace clic en el cuadro Seleccionar y se muestran 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);
}

Answer 1

Debe poner 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 diseñar cada una de las etiquetas 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"] { /* value not val */
    background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] { /* value not val */
    background: rgba(200, 200, 200, 0.3);
}

/* ... */

Answer 2

Mis seleccionados no colorearán el fondo hasta que agregue! Importante para el estilo.

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

Answer 3

No sé si lo ha considerado o no, pero si su aplicación se basa en colorear varias agrupaciones de elementos, probablemente debería utilizar la etiqueta <optgroup> 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 así:

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

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

Answer 4

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

Answer 5

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

option:not(:checked) { }

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

Answer 6

Si realmente desea diseñar el estilo dentro de 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 porque los navegadores como IE no permiten el diseño de opciones dentro de los elementos . Chrome / OSX también tiene este problema: no puedes diseñar opciones.

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 no se usan elementos nativos. También pueden tener caprichos molestos en el escritorio. Mi consejo es 1) no escribas el tuyo y 2) busca una biblioteca que haya sido realmente probada.

Answer 7

Simplemente cambie el color bg

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

Answer 8

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

¡La especificación de CSS 2 no resolvió el problema de cómo los elementos de formulario deberían presentarse a los usuarios!

Lea aquí: aplastante revista

Eventualmente , nunca encontrará ningún artículo técnico de w3c u otro dirigido a este tema. El estilo de los elementos de formulario en cuadros de selección particulares no es totalmente compatible, sin embargo, puede conducir ... ¡con cierto esfuerzo!

Diseñar elementos de formulario HTML

Creación de widgets personalizados

No pierdas el tiempo con hacks e lee los enlaces y aprende cómo los profesionales hacen el trabajo.

Answer 9

De forma similar a algunas de las respuestas, pero realmente no indicadas, es agregar una clase a la etiqueta de opción real y usar clases de CSS ... esto actualmente me funciona 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;
}

Answer 10

$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>'';

agrega $htmlIngressCss en tu porción html :)