Ändern Sie die Hintergrundfarbe der Auswahlfeldoption

Lesezeit: 4 Minuten

Andern Sie die Hintergrundfarbe der Auswahlfeldoption
ngspielplatz

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

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>

Andern Sie die Hintergrundfarbe der Auswahlfeldoption
udidu

Sie müssen setzen background-color auf der option Tag und nicht die select Schild…

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 stylen möchten option Tags .. Verwenden Sie das CSS attribute Wähler:

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 habe die rgba-Option weggenommen und scheint jetzt schwarz zu verwenden, was ausreichen wird 🙂

    – Spielplatz

    11. Oktober 2012 um 9:33 Uhr

  • Sie könnten das CSS verwenden :nth-child(1..n) Wahlschalter statt.

    – Samuel Liew

    3. September 2013 um 3:14 Uhr

  • Sie sollten die Attributauswahl wahrscheinlich nicht verwenden. Wahrscheinlich möchten Sie stattdessen das n-te Kind verwenden oder jeder Option eine Klasse zuweisen.

    – Fred

    31. August 2015 um 14:24 Uhr

  • Funktioniert nicht mit Firefox, auch nicht mit Chromium (Linux Antergos)

    – Albert

    21. Dezember 2016 um 10:17 Uhr

  • Versuchen Sie hinzufügen !imporant. Zum Beispiel: background: red!important;

    – Michael

    18. August 2019 um 19:52 Uhr


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 die verwenden <optgroup> Tag gekoppelt mit einer Klasse zur weiteren Referenzierung. 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 schreiben Sie dann im Kopf Ihres Dokuments das CSS wie folgt:

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

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

Andern Sie die Hintergrundfarbe der Auswahlfeldoption
Jaykumar Patel

Ja, Sie können dies auch umgekehrt einstellen:

select { /* desired background */ }
option:not(:checked) { background: #fff; }

Überprüfen Sie, ob es unten funktioniert:

select {
  margin: 50px;
  width: 300px;
  background: #ff0;
  color: #000;
}

option:not(:checked) {
  background-color: #fff;
}
<select>
  <option val="">Select Option</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>

  • @aswzen funktioniert tatsächlich in Chrome für mich (v65), aber nicht in Firefox Quantum (v59).

    – CPHPython

    17. Mai 2018 um 10:55 Uhr

Geben Sie hier die Bildbeschreibung ein

Ähnlich wie einige der Antworten, aber nicht wirklich angegeben, ist das Hinzufügen einer Klasse zum eigentlichen Options-Tag 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;
}

Eine weitere 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)

1647269528 740 Andern Sie die Hintergrundfarbe der Auswahlfeldoption
Bob Brunius

Meine Auswahl würde den Hintergrund nicht einfärben, bis ich !important zum Stil hinzufügte.

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

1647269529 774 Andern Sie die Hintergrundfarbe der Auswahlfeldoption
Gemeinschaft

Wenn Sie das innerhalb einer wirklich gestalten möchten, ziehen Sie in Betracht, zu einem Javascript/CSS-basierten Dropdown wie z http://getbootstrap.com/2.3.2/components.html#dropdowns oder https://silviomoreto.github.io/bootstrap-select/examples/. Dies liegt daran, dass Browser wie IE keine Gestaltung von Optionen innerhalb von Elementen zulassen. Chrome/OSX hat auch dieses Problem – Sie können keine Optionen stylen.

An diesen Ansatz ist jedoch eine Warnung geknüpft. Diese Arten von Menüs funktionieren auf mobilen Plattformen ganz anders, da keine nativen Elemente verwendet werden. Sie können auch auf dem Desktop lästige Macken haben. Mein Rat ist: 1) schreiben Sie keine eigene und 2) finden Sie eine Bibliothek, die wirklich gut getestet wurde.

1002000cookie-checkÄndern Sie die Hintergrundfarbe der Auswahlfeldoption

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy