wake-up-neo.net

Wie kann ich die Hintergrundfarbe der Auswahlboxoption ändern?

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

Siehe 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

Sie müssen background-color in das option-Tag und nicht in das select-Tag einfügen ...

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 jeden der option-Tags formatieren möchten, verwenden Sie den Selektor 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

Ich weiß nicht, ob Sie darüber nachgedacht haben oder nicht, aber wenn Ihre Anwendung darauf basiert, verschiedene Gruppierungen von Elementen zu färben, sollten Sie wahrscheinlich das mit einer Klasse gekoppelte <optgroup>-Tag für die weitere Referenzierung verwenden. Zum Beispiel:

<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 die Datei in den Kopf Ihres Dokuments wie folgt:

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

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

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;
}
15
Jay Patel

enter image description here

Ähnlich wie bei einigen Antworten, aber nicht wirklich angegeben, ist das Hinzufügen einer Klasse zum eigentlichen Option-Tag und die Verwendung von css-Klassen. Dies funktioniert derzeit für mich ohne Probleme unter 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;
}
5
dah97765

Ändern Sie einfach die Farbe von 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>';

füge $htmlIngressCss in deinem HTML-Teil hinzu :)

1
Chintan

Wenn Sie das innerhalb von a wirklich formatieren möchten, sollten Sie zu einem Javascript/CSS-basierten Dropdown wechseln, z. B. http://getbootstrap.com/2.3.2/components.html#dropdowns oder https: // silviomoreto.github.io/bootstrap-select/examples/ . Dies ist darauf zurückzuführen, dass Browser wie IE keine Optionen für Elemente innerhalb von Elementen definieren. Chrome/OSX hat auch dieses Problem - Sie können Optionen nicht gestalten. 

Diesem Ansatz ist jedoch eine Warnung beigefügt. Diese Arten von Menüs funktionieren auf mobilen Plattformen sehr unterschiedlich, da keine nativen Elemente verwendet werden. Sie können auch lästige Macken auf dem Desktop haben. Mein Rat ist 1) Schreiben Sie keine eigenen und 2) finden Sie eine Bibliothek, die wirklich gut getestet wurde. 

1
Charlie Dalsass

Meine Auswahl würde den Hintergrund erst dann färben, wenn ich dem Stil etwas Wichtiges hinzufügte.

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

Eine andere Möglichkeit ist, Javascript zu verwenden:

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

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

0
Travis

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

Die CSS 2-Spezifikation befasste sich nicht mit dem Problem, wie Formularelemente für Benutzer angezeigt werden sollten.

Lesen Sie hier:zerschlagenes Magazin

Eventual, Sie werden niemals einen technischen Artikel von w3c oder anderen an dieses Thema gerichteten Themen finden. Die Gestaltung von Formularelementen, insbesondere Auswahlboxen, wird nicht vollständig unterstützt. Sie können jedoch mit etwas Aufwand herumfahren.

HTML-Formularelemente gestalten

Benutzerdefinierte Widgets erstellen

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

0
obinoob