Ändern Sie die Hintergrundfarbe der Auswahlfeldoption

Ich habe eine selectBox und versuche, die Hintergrundfarbe der Optionen zu ändern, wenn auf die selectBox geklickt wurde und alle Optionen angezeigt werden.

Siehe Geige

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

Sie müssen background-colordas optionTag und nicht das selectTag anbringen ...

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

Wenn Sie jedes der optionTags formatieren möchten, verwenden Sie den CSS- attributeSelektor:

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>

Ich weiß nicht, ob Sie darüber nachgedacht haben oder nicht, aber wenn Ihre Anwendung auf dem Färben verschiedener Gruppierungen von Elementen basiert, sollten Sie wahrscheinlich das <optgroup>Tag in Verbindung mit einer Klasse zur weiteren Referenzierung verwenden. Beispielsweise:

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

und dann schreiben Sie in den Kopf Ihres Dokuments das CSS wie folgt:

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

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

Ja, Sie können dies auf entgegengesetzte Weise einstellen.

option:not(:checked) { }

Überprüfen Sie dies 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;
}

Ähnlich wie bei einigen der Antworten, aber nicht wirklich angegeben, besteht das Hinzufügen einer Klasse zum eigentlichen Optionstag und die Verwendung von CSS-Klassen ... dies funktioniert derzeit für mich ohne Probleme im IE (siehe oben 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;
}

Meine Auswahl würde den Hintergrund nicht färben, bis ich! Wichtig zum Stil hinzugefügt habe.

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

Wenn Sie das in a wirklich stylen möchten, sollten Sie zu einem Javascript / CSS-basierten Dropdown-Menü wie http://getbootstrap.com/2.3.2/components.html#dropdowns oder https://silviomoreto.github.io/ wechseln. bootstrap-select / examples / . Dies liegt daran, dass Browser wie der IE das Gestalten von Optionen innerhalb von Elementen nicht zulassen . Chrome / OSX hat auch dieses Problem - Sie können keine Optionen formatieren.

Diesem Ansatz ist jedoch eine Warnung beigefügt. Diese Menütypen funktionieren auf mobilen Plattformen sehr unterschiedlich, da native Elemente nicht verwendet werden. Sie können auch auf dem Desktop nervige Macken haben. Mein Rat ist 1) schreibe keine eigenen und 2) finde eine Bibliothek, die wirklich gut getestet wurde.

Hier geht es, was ich über das Thema gelernt habe!

Die CSS 2-Spezifikation ging nicht auf das Problem ein, wie Formularelemente dem Benutzerzeitraum präsentiert werden sollten!

Lesen Sie hier: Smashing Magazine

Schließlich werden Sie niemals einen technischen Artikel von w3c oder einem anderen zu diesem Thema adressierten Artikel finden. Das Stylen von Formularelementen in bestimmten Auswahlfeldern wird nicht vollständig unterstützt, Sie können jedoch herumfahren ... mit etwas Aufwand!

Styling von HTML-Formularelementen

Erstellen von benutzerdefinierten Widgets

Verschwenden Sie keine Zeit mit Hacks. Lesen Sie die Links und erfahren Sie, wie Profis ihre Arbeit erledigen!

Ändern Sie einfach die Farbe

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

Eine andere Möglichkeit ist die Verwendung von Javascript:

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

(Nicht so sauber wie der CSS-Attributselektor, aber leistungsfähiger)

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

füge $htmlIngressCssdeinen HTML-Teil hinzu :)