Ändern wählen Sie im Feld option Hintergrundfarbe

Ich habe eine select box, und ich versuche, ändern Sie die Hintergrundfarbe der Optionen, wenn der select Feld angeklickt wurde und zeigt alle Optionen.

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);
}
InformationsquelleAutor ngplayground | 2012-10-11
  1. 134

    Müssen Sie background-color auf die option tag und nicht die select tag...

    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 möchten, um Stil jedes der option tags.. mit der css - attribute selector:

    CSS:

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

    HTML:

    <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 nahm die rgba option und scheint schwarz zu verwenden, jetzt wird das tun 🙂
    • Mit rgba funktioniert nicht, zumindest nicht in Chome v. 27.
    • Sie konnte die CSS :nth-child(1..n) - Selektor statt.
    • Sie sollten wahrscheinlich nicht verwenden der Attribut-Selektor. Sie wollen wahrscheinlich verwenden Sie das n-te Kind oder jeder option eine Klasse statt.
    • funktioniert nicht in chrome auf mac os
    • Funktioniert nicht für mich auf Chrome mit Windows OS
    • Nicht funktioniert für Chrome und Safari auf dem Mac
    • Funktioniert nicht auf Firefox, weder in Chromium (Linux Antergos)

    InformationsquelleAutor udidu
  2. 16

    Ich weiß nicht, ob Sie als habe Sie es oder nicht, aber wenn Ihre Anwendung auf der Grundlage von Farbmitteln verschiedene Gruppierungen der Elemente, die Sie sollten wahrscheinlich verwenden Sie die <optgroup> tag, gepaart mit einer Klasse für die weitere 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 dann in den Kopf Ihres Dokuments schreiben der css wie dieses:

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

    .blue option{
        background-color:#00F;
    }
</style>
    • Verfügbar auf jsfiddle: jsfiddle.net/ubm6vd3r
    • Funktioniert nicht auf firefox
    • Funktioniert nicht bei Chrome, als auch
    InformationsquelleAutor rfoo
  3. 15

    Ja, Sie können dies durch die oppisite Weg mit diesem,

    option:not(:checked) { }

    überprüfen Sie das demo auf 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;
}
    • funktioniert nicht im chrome...
    • eigentlich in Chrom ist für mich arbeiten (v65), nicht aber in Firefox Quantum (v59).
    InformationsquelleAutor Jay Patel
  4. 5

    Ändern wählen Sie im Feld option Hintergrundfarbe

    Ähnlich wie einige der Antworten, aber nicht wirklich erklärt, ist eine Klasse Hinzugefügt werden, um die tatsächliche option-Tags und css-Klassen...das ist derzeit für mich arbeiten ohne Problem auf 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;
}
    InformationsquelleAutor dah97765
  5. 1

    Wenn Sie wirklich wollen, um Stil, der innerhalb einer , die Umstellung auf eine Javascript - /CSS-basierte drop-down-wie http://getbootstrap.com/2.3.2/components.html#dropdowns oder https://silviomoreto.github.io/bootstrap-select/examples/. Dies, weil Browsern wie IE nicht ermöglichen styling-Optionen in elements. Chrome/OSX hat auch dieses problem - Sie können nicht Stil-Optionen.

    Jedoch eine Warnung angebracht ist, dass Ansatz. Diese Arten von Menüs arbeiten sehr unterschiedlich auf mobilen Plattformen, da die native Elemente nicht verwendet werden. Sie können lästige Macken auf dem desktop als auch. Meine Ratschläge: 1) schreiben Sie nicht Ihre eigenen und 2) finden Sie eine Bibliothek, die war wirklich gut getestet.

    InformationsquelleAutor Charlie Dalsass
  6. 1
    $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>';

    hinzufügen $htmlIngressCss im html-Teil 🙂

    InformationsquelleAutor Chintan
  7. 1

    Ändern Sie einfach die bg color

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

    InformationsquelleAutor Thomas Mathew
  8. 0

    Andere option ist die Verwendung von Javascript:

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

    (Nicht so sauber, wie das CSS-Attribut-Selektor, aber leistungsfähiger)

    InformationsquelleAutor Travis
  9. 0

    Mein auswählt, würde nicht die Farbe der hintergrund, bis ich Hinzugefügt !wichtig für den style.

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

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

    Den CSS-2-Spezifikation nicht auf das problem, wie man Formular-Elemente dargestellt werden sollten, um Benutzer Zeit!

    Lesen Sie hier: das smashing magazine

    Schließlich, werden Sie nie finden alle technischen Artikel vom w3c oder anderen angesprochen zu diesem Thema. Styling form-Elemente in bestimmte Felder auswählen, die nicht vollständig unterstützt, Sie können jedoch herum fahren... mit etwas Mühe!

    Styling-HTML-Formular-Elemente

    Erstellen Von Benutzerdefinierten Widgets

    Verschwenden Sie keine Zeit mit hacks e Z Lesen Sie den links und erfahren Sie, wie Profis den job zu erledigen!

    InformationsquelleAutor obinoob
Schreibe einen Kommentar