:open

Syntax

:open {
  /* ... */
}

Beschreibung

Die :open Pseudoklasse selektiert jedes Element, das sich aktuell im offenen Zustand befindet, was die folgenden Elemente umfasst:

• <details> und <dialog> Elemente, die sich in einem offenen Zustand befinden, d.h. sie haben das open Attribut gesetzt.
• <input> Elemente, die eine Auswahlschnittstelle anzeigen, aus der der Benutzer einen Wert wählen kann (zum Beispiel <input type="color">), wenn der Auswahlbereich angezeigt wird.
• <select> Elemente, die ein Dropdown-Auswahlmenü anzeigen, aus dem der Benutzer einen Wert wählen kann, wenn der Auswahlbereich angezeigt wird. Beachten Sie, dass beim Implementieren von anpassbaren Select-Elementen, der Auswahlbereich selbst mit dem ::picker(select) Pseudoelement ausgewählt werden kann.

Beachten Sie, dass die offenen und geschlossenen Zustände semantische Zustände sind und nicht unbedingt mit der Sichtbarkeit des betreffenden Elements korrelieren. Zum Beispiel ist ein <details> Element, das erweitert wird, um seinen Inhalt anzuzeigen, offen und wird durch den details:open Selektor ausgewählt, selbst wenn es mit einem visibility Wert von hidden verborgen ist.

Popover Elemente (d.h. Elemente mit dem popover Attribut) haben unterschiedliche semantische Zustände, die Popover repräsentieren, die angezeigt oder verborgen sind und die neben den offenen und geschlossenen Zuständen existieren können. Um ein Popover-Element im angezeigten Zustand anzuwählen, verwenden Sie die :popover-open Pseudoklasse.

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

Benutzerdefinierte <select>-Stil mit :open

In diesem Beispiel geben wir einem grundlegenden <select> Element eine benutzerdefinierte Stilgebung. Die :open Pseudoklasse wird verwendet, um eine Stilverbesserung für seinen offenen Zustand anzuwenden — wenn das Dropdown-Menü angezeigt wird.

HTML

Unser Fruchtwähler ist nichts Besonderes.

<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 standardmäßige Betriebssystemstilgebung von der Auswahlliste zu entfernen und einige grundlegende eigene Stile hinzuzufügen. Besonders bemerkenswert ist, dass wir ein SVG Hintergrundbild eines nach unten zeigenden Pfeils auf der rechten Seite setzen — Benutzer erkennen <select> Elemente oft an dem nach unten zeigenden Pfeil, daher ist es eine gute Idee, ihn einzubeziehen.

Wir setzen dann etwas padding auf dem umgebenden <label> Element und einen transparenten Rahmen, um das Layout konsistent zu halten, wenn wir später einen farbigen Rahmen 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 in einen nach oben zeigenden Pfeil zu ändern. Wir setzen auch eine andere Hintergrundfarbe und einen Rahmen auf das umgebende <label> Element, indem wir eine Kombination der :open und :has() Pseudoklassen verwenden, um einen übergeordneten Selektor zu erstellen. Wir sagen wörtlich "wähle das <label>, aber nur, wenn sein Nachkomme <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 zu öffnen, um den Effekt auf die Stilgebung zu sehen:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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