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