web-dev-qa-db-fra.com

Comment changer la couleur d'arrière-plan de l'option de sélection?

J'ai une boîte de sélection et j'essaie de changer la couleur d'arrière-plan des options lorsque la boîte de sélection a été cliquée et affiche toutes les options.

Voir Fiddle

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);
}
htmlcssselectbackground-color
92
ngplayground

Vous devez mettre background-color sur la balise option et non la balise 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 vous souhaitez styler chacune des balises option, utilisez le sélecteur css 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>

120
udidu

Je ne sais pas si vous y avez pensé ou non, mais si votre application est basée sur la coloration de divers groupes d'éléments, vous devriez probablement utiliser la balise <optgroup> associée à une classe pour un référencement ultérieur. Par exemple:

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

et ensuite dans la tête de votre document, écrivez le css comme ceci:

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

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

Oui, vous pouvez régler ceci de manière oppisite en utilisant ceci,

option:not(:checked) { }

vérifie ça 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;
}
15
Jay Patel

enter image description here

Une solution similaire à certaines des réponses, mais pas vraiment indiquée, consiste à ajouter une classe à la balise d'option réelle et à utiliser des classes css ... cela fonctionne actuellement pour moi sans problème sur IE (voir ci-dessus 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;
}
5
dah97765

Changez simplement la couleur de votre bg

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

1
Thomas Mathew
$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>';

ajoutez $htmlIngressCss dans votre portion html :)

1
Chintan

Si vous souhaitez vraiment styler les éléments internes, envisagez de passer à un menu déroulant basé sur Javascript/CSS tel que http://getbootstrap.com/2.3.2/components.html#dropdowns ou https: // silviomoreto.github.io/bootstrap-select/examples/ . En effet, les navigateurs tels que IE n'autorisent pas le style des options dans les éléments . Chrome/OSX a également ce problème - vous ne pouvez pas styler les options. 

Cependant, un avertissement est associé à cette approche. Ces types de menus fonctionnent très différemment sur les plates-formes mobiles car les éléments natifs ne sont pas utilisés. Ils peuvent aussi avoir des bizarreries gênantes sur le bureau. Mon conseil est 1) n'écrivez pas le vôtre et 2) trouvez une bibliothèque vraiment bien testée. 

1
Charlie Dalsass

Mes sélections ne coloreraient pas l'arrière-plan tant que je n'aurais pas ajouté le style.

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

Une autre option consiste à utiliser Javascript:

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

(Pas aussi propre que le sélecteur d'attribut CSS, mais plus puissant)

0
Travis

Voilà ce que j'ai appris sur le sujet!

La spécification CSS 2 n'abordait pas le problème de la présentation des éléments de formulaire aux utilisateurs!

Lire ici:Magazine éblouissant

Eventuellement, vous ne trouverez jamais aucun article technique de w3c ou autre sur ce sujet. Le style des éléments de formulaire, en particulier les zones de sélection, n'est pas totalement pris en charge. Cependant, vous pouvez vous déplacer ... avec quelques efforts!

Style des éléments de formulaire HTML

Création de widgets personnalisés

Ne perdez pas de temps avec des bidouilles, lisez par exemple les liens et découvrez comment les professionnels font le travail!

0
obinoob