Wie ändere ich die Hintergrundfarbe der ausgewählten Box?

Ich habe eine Select-Box, und ich versuche, ändern Sie die Hintergrundfarbe der Optionen, wenn das 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 der Frage ngplayground | 2012-10-11

108

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:

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"] { /* value not val */
    background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] { /* value not val */
    background: rgba(200, 200, 200, 0.3);
}

/* ... */

InformationsquelleAutor der Antwort udidu

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>

InformationsquelleAutor der Antwort rfoo

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

InformationsquelleAutor der Antwort Jay Patel

4

Ä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 der Antwort dah97765
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 der Antwort Charlie Dalsass

$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 der Antwort Chintan

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 der Antwort Travis
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 der Antwort Bob Brunius
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ßlichwerden 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 der Antwort obinoob
0

Ändern Sie einfach die bg color

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

InformationsquelleAutor der Antwort Thomas Mathew

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.