CSS :placeholder-shown & :focus-within

:placeholder-shown

Mit diesem Element können Formulare so bearbeitet werden, dass die Styling-Informationen nur zu sehen sind, solange der Placeholder angezeigt wird. Wird im Formular beispielsweise etwas eingetippt und verschwindet der Placeholder, verschwinden mit ihm auch die Styling-Informationen.

Beispiel: https://codepen.io/team/css-tricks/pen/NxdJgV

---

:focus-within

Mit diesem Element hat man die Möglichkeit das Elternelement eines Formulars zu adressieren und zu verändern, sobald ein Formularelement fokussiert wird.

Beispiel: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within