Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
:focus-within
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die :focus-within CSS Pseudoklasse trifft auf ein Element zu, wenn das Element selbst oder eines seiner Nachkommen den Fokus hat. Anders ausgedrückt, sie repräsentiert ein Element, das selbst von der :focus Pseudoklasse getroffen wird oder einen Nachkommen hat, der von :focus getroffen wird. (Dies schließt Nachkommen in Shadow Trees ein.)
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
label:focus-within {
font-weight: bold;
}
<form>
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
</form>
Dieser Selektor ist nützlich, um ein gängiges Beispiel zu nennen, um einen gesamten <form> Container hervorzuheben, wenn der Benutzer eines seiner <input> Felder fokussiert.
Syntax
:focus-within {
/* ... */
}
Beispiele
In diesem Beispiel erhält das Formular spezielle Farbgebungsstile, wenn eines der Texteingabefelder den Fokus erhält.
HTML
<p>Try typing into this form.</p>
<form>
<label for="given_name">Given Name:</label>
<input id="given_name" type="text" />
<br />
<label for="family_name">Family Name:</label>
<input id="family_name" type="text" />
</form>
CSS
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ffff88;
color: black;
}
input {
margin: 4px;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |
Browser-Kompatibilität
Loading...