Modifier la couleur d'arrière-plan des options de la boîte de sélection

Question

J'ai une boîte de sélection et j'essaie de changer la couleur de fond des options lorsque la boîte de sélection a été cliquée et qu'elle affiche toutes les options.

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>

Answer 1

Mes sélections ne coloraient pas l'arrière-plan jusqu'à ce que j'ajoute !important au style.

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

Answer 2

Si vous voulez vraiment donner un style à l'intérieur d'un , envisagez de passer à un menu déroulant basé sur Javascript/CSS tel que http://getbootstrap.com/2.3.2/components.html#dropdowns o https://silviomoreto.github.io/bootstrap-select/examples/ . Ceci parce que les navigateurs tels que IE ne pas autoriser le style des options dans les éléments . Chrome/OSX a également ce problème : vous ne pouvez pas modifier les options de style.

Cette approche est toutefois assortie d'un avertissement. 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 également présenter des bizarreries gênantes sur les ordinateurs de bureau. Je vous conseille 1) de ne pas écrire votre propre menu et 2) de trouver une bibliothèque qui a été très bien testée.

Answer 3

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

La spécification CSS 2 n'a pas abordé le problème de la manière dont les éléments de formulaire doivent être présentés aux utilisateurs !

Lire ici : magazine fracassant

Finalement, vous ne trouverez jamais d'article technique du W3C ou autre sur ce sujet. Le stylisme des éléments de formulaire, en particulier les boîtes de sélection, n'est pas entièrement pris en charge ; cependant, vous pouvez vous déplacer... avec quelques efforts !

Stylisation des éléments de formulaire HTML

Création de widgets personnalisés

Ne perdez pas de temps avec des astuces, lisez les liens et apprenez comment les pros font leur travail !

Answer 4

JUSTE UNE PETITE CONTRIBUTION AU CAS OÙ QUELQU'UN LA CHERCHERAIT.

http://jsfiddle.net/luiscastillo/sFx7f/

$(function(){   
$('#tipo').focusin(function(){
         $(this).css('color','red')
       });  

      $('#tipo').focusout(function(){         
        if(this.value === '') $(this).css('color','#ccc'); else $(this).css('color','red');         
       });
 });

Answer 5

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

ajouter $htmlIngressCss dans votre partie html :)