CSS: Ausgewählte Pseudoklasse ähnlich: geprüft, jedoch für <select> -Elemente

86

Gibt es eine Möglichkeit, das aktuell ausgewählte <option>Element in einem <select>Element zu formatieren?

Könnte ich dann dem aktuell ausgewählten Optionselement eine Hintergrundfarbe geben? Auf diese Weise kann ich die Option formatieren, die derzeit in der geschlossenen Dropdown-Liste angezeigt wird.

— Webdesigner
quelle

123

Die :checkedPseudoklasse gilt zunächst für solche Elemente mit HTML4 selectedund checkedAttributen

Quelle: w3.org

Dieses CSS funktioniert also, obwohl das Styling colornicht in jedem Browser möglich ist:

option:checked { color: red; }

Ein Beispiel hierfür ist das Ausblenden des aktuell ausgewählten Elements aus der Dropdown-Liste.

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Erweitern Sie das Snippet

Um die aktuell ausgewählte Option auch in der geschlossenen Dropdown-Liste zu formatieren, können Sie versuchen, die Logik umzukehren:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

— Emmett
quelle

4

Hast du es getestet? Bei FF8 scheint es bei mir nicht zu funktionieren . Update: Es funktioniert auch nicht in Chromium 15.

— Brigand

1

@emmett Ich habe es auch in Chrome 16 überprüft. Wie ich in meinem vorherigen Kommentar sagte, wird die ausgewählte Option in der Dropdown-Liste formatiert, nicht jedoch die im geschlossenen sichtbaren Bereich.

— Web_Designer

2

@Web_Designer Ok, ich sehe das Problem. Ich habe meine Antwort mit einer anderen (wackeligen) Lösung bearbeitet.

— Emmett

akzeptierte Antwort funktioniert bei mir nicht in Chrom. Sie können hier testen: jsfiddle.net/hk4s0ech

— Andre Chenier

17

Tatsächlich können Sie nur wenige CSS-Eigenschaften für : geänderte Optionselemente formatieren. colorfunktioniert auch nicht background-color, aber Sie können a einstellen background-image.

Sie können dies mit Verläufen koppeln, um den Trick auszuführen.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Erweitern Sie das Snippet

Funktioniert mit Gecko / Webkit.

— Antwan
quelle

Die akzeptierte Antwort hat bei mir nicht funktioniert, aber diese Lösung hat funktioniert. Vielen Dank!

— Anthony Hilyard

Beachten Sie, dass Sie den Filter auch folgendermaßen anwenden können: Option: markiert {Filter: Graustufen (1);} Dies ähnelt dem heutigen Stil, mit dem Sie Kontrollkästchen und Radiobuttons in Chrome so gestalten können, dass sie nicht blau sind.

— KS74

3

Das hat bei mir funktioniert:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}

— Neoweiter
quelle