:open

Syntax

:open {
  /* ... */
}

Beschreibung

Die :open Pseudoklasse wählt jedes Element im aktuellen offenen Zustand aus, einschließlich der folgenden Elemente:

• <details> und <dialog> Elemente, die sich in einem offenen Zustand befinden, das heißt, sie haben das open Attribut gesetzt. Diese Auswahl kann auch mit einem Attributselektor gemacht werden: details[open].
• <input> Elemente, die eine Auswahloberfläche für den Benutzer anzeigen, um einen Wert auszuwählen (zum Beispiel <input type="color">), wenn die Auswahloberfläche angezeigt wird.
• <select> Elemente, die ein Dropdown-Menü anzeigen, aus dem der Benutzer einen Wert auswählen kann, wenn das Menü angezeigt wird. Beachten Sie, dass bei der Implementierung von anpassbaren Select-Elementen, das Menü selbst mit dem ::picker(select) Pseudo-Element ausgewählt werden kann.

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

Popover Elemente (das heißt, Elemente, die das popover Attribut gesetzt haben) haben unterschiedliche semantische Zustände, die Popovers darstellen, die angezeigt oder versteckt sein können, und diese können neben offenen und geschlossenen Zuständen koexistieren. Um ein Popover-Element im angezeigten Zustand zu selektieren, verwenden Sie die :popover-open Pseudoklasse stattdessen.

Beispiele

Grundlegende Verwendung von :open

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

CSS

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

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

@supports not selector(:open) {
  body::before {
    content: "Your browser doesn't support :open selector.";
    background-color: wheat;
    display: block;
    width: 100%;
    text-align: center;
  }

  body > * {
    display: none;
  }
}

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

Benutzerdefiniertes <select> Styling mit :open

In diesem Beispiel geben wir einem grundlegenden <select> Element ein individuelles Styling. Die :open Pseudoklasse wird verwendet, um eine stilistische Verbesserung für den offenen Zustand anzuwenden — wenn das Dropdown-Menü angezeigt wird.

HTML

Es gibt nichts Besonderes an unserem Fruchtwähler.

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

CSS

Im CSS setzen wir einen appearance Wert von none auf unser <select> Element, um die Standard-OS-Styling aus der Auswahlbox zu entfernen, und bieten einige grundlegende eigene Styles an. Am bemerkenswertesten setzen wir ein SVG Hintergrundbild eines Pfeils nach unten auf der rechten Seite — Benutzer neigen dazu, <select> Elemente anhand des Pfeils nach unten zu erkennen, daher ist es eine gute Idee, diesen einzuschließen.

Wir setzen dann etwas padding auf das umgebende <label> Element und einen transparenten Rand, um das Layout konsistent zu halten, wenn wir später einen farbigen Rand hinzufügen.

select {
  appearance: none;
  width: 100%;
  display: block;
  font-family: inherit;
  font-size: 100%;
  padding: 5px;
  border: 1px solid black;
  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 ist, verwenden wir die :open Pseudoklasse, um eine andere Hintergrundfarbe zu setzen und das Hintergrundbild zu einem Pfeil nach oben zu ändern. Wir setzen auch eine andere Hintergrundfarbe und einen Rand auf das umschließende <label> Element, indem wir eine Kombination aus den :open und :has() Pseudoklassen verwenden, um einen Elterselektor zu erstellen. Wir sagen wörtlich "wähle das <label>, aber nur, wenn dessen Nachfahre <select> offen ist."

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-Menü zu öffnen, um den Effekt auf das Styling zu sehen:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <details>, <dialog>, <select>, und <input> Elemente
• :popover-open Pseudoklasse
• :modal