:open

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die :open CSS Pseudoklasse repräsentiert ein Element, das einen geöffneten und geschlossenen Zustand hat, nur wenn es sich aktuell im geöffneten Zustand befindet.

Syntax

css
:open {
  /* ... */
}

Beschreibung

Die :open-Pseudoklasse wählt jedes Element aus, das sich derzeit im geöffneten Zustand befindet. Dazu gehören die folgenden Elemente:

  • <details>- und <dialog>-Elemente, die sich im geöffneten Zustand befinden, d.h. wenn das open-Attribut gesetzt ist.
  • <input>-Elemente, die eine Auswahloberfläche anzeigen, aus der der Benutzer einen Wert wählen kann (z.B. <input type="color">), wenn diese Oberfläche angezeigt wird.
  • <select>-Elemente, die ein Dropdown-Menü für die Auswahl eines Wertes anzeigen, wenn dieses Menü angezeigt wird.

Beachten Sie, dass offene und geschlossene Zustände semantische Zustände sind und nicht unbedingt mit der Sichtbarkeit des betreffenden Elements korrelieren. Zum Beispiel ist ein <details>-Element, das erweitert ist, um seinen Inhalt zu zeigen, geöffnet und wird vom details:open-Selektor ausgewählt, selbst wenn es mit einem visibility-Wert von hidden versteckt ist.

Popover-Elemente (d.h. Elemente mit dem popover-Attribut) haben separate semantische Zustände, die anzeigen, ob sie sichtbar oder verborgen sind, was parallel zu offenen und geschlossenen Zuständen existieren kann. Um ein Popover-Element im sichtbaren Zustand zu selektieren, verwenden Sie die Pseudoklasse :popover-open.

Beispiele

Grundlegende Nutzung von :open

Dieses Beispiel zeigt einige HTML-Elemente, die einen offenen Zustand haben.

CSS

css
details:open > summary {
  background-color: pink;
}

:is(select, input):open {
  background-color: pink;
}

HTML

html
<details>
  <summary>Details</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar dapibus
  lacus, sit amet finibus lectus mollis eu. Nullam quis orci dictum, porta lacus
  et, cursus nunc. Aenean pulvinar imperdiet neque fermentum facilisis. Nulla
  facilisi. Curabitur vitae sapien ut nunc pulvinar semper vitae vitae nisi.
</details>
<hr />

<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>
<hr />

<label for="start">Start date:</label>
<input type="date" id="start" />

Ergebnis

Benutzerdefinierte <select>-Stilierung mit :open

In diesem Beispiel erhält ein einfaches <select>-Element eine benutzerdefinierte Stilierung. Die :open-Pseudoklasse wird verwendet, um eine Stilverbesserung für den offenen Zustand anzuwenden – wenn das Dropdown-Menü angezeigt wird.

HTML

Unser Fruchtwähler hat nichts Besonderes.

html
<label>
  Choose your favorite fruit:
  <select name="fruit">
    <option>apple</option>
    <option>banana</option>
    <option>boysenberry</option>
    <option>cranberry</option>
    <option>fig</option>
    <option>grapefruit</option>
    <option>lemon</option>
    <option>orange</option>
    <option>papaya</option>
    <option>pomegranate</option>
    <option>tomato</option>
  </select>
</label>

Hinweis: Wir verwenden kein mehrzeiliges <select> (also eines mit dem multiple-Attribut) – solche tendieren dazu, als Scroll-Listenfeld anstelle eines Dropdown-Menüs dargestellt zu werden und haben daher keinen offenen Zustand.

CSS

Im CSS setzen wir einen appearance-Wert von none auf unser <select>-Element, um die standardmäßige Betriebssystem-Stilierung zu entfernen, und fügen einige grundlegende eigene Stile hinzu. Besonders hervorzuheben ist, dass wir ein SVG-Hintergrundbild eines nach unten zeigenden Pfeils auf der rechten Seite hinzufügen – Benutzer erkennen <select>-Elemente oft an diesem Pfeil, daher ist es eine gute Idee, ihn zu integrieren.

Anschließend fügen wir etwas padding auf das umgebende <label>-Element hinzu und setzen einen transparenten Rahmen, um das Layout konsistent zu halten, wenn wir später einen farbigen Rahmen hinzufügen.

css
select {
  appearance: none;
  width: 100%;
  display: block;
  font-family: inherit;
  font-size: 100%;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewbox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,5 15,5 10,15'/%3E%3C/svg%3E")
    no-repeat right 3px center / 1em 1em;
}

label {
  font-family: sans-serif;
  max-width: 20em;
  display: block;
  padding: 20px;
  border: 2px solid transparent;
}

Wenn das <select> geöffnet wird, nutzen wir die :open-Pseudoklasse, um eine andere Hintergrundfarbe zu setzen und das Hintergrundbild in einen nach oben zeigenden Pfeil zu ändern. Außerdem setzen wir eine andere Hintergrundfarbe und einen Rahmen auf das umschließende <label>-Element, indem wir eine Kombination aus der :open- und :has()-Pseudoklasse verwenden, um einen Elternelement-Selektor zu erstellen. Wir sagen wörtlich: "Wählen Sie das <label> aus, aber nur, wenn sein Nachkommenelement <select> geöffnet ist."

css
select:open {
  background-color: #f8f2dc;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewbox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,15 10,5 15,15'/%3E%3C/svg%3E");
}

label:has(select:open) {
  background-color: #81adc8;
  border-color: #cd4631;
}

Ergebnis

Das Ergebnis ist wie folgt. Versuchen Sie, das <select>-Dropdown zu öffnen, um den Effekt auf die Stilierung zu sehen:

Spezifikationen

Specification
HTML
# selector-open
Selectors Level 4
# selectordef-open

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Has more compatibility info.

Siehe auch