@@Jule > Das heißt ich müsste wahrscheinlich ein DIV über dem Textfeld plazieren, dieses ausblenden und mit deiner Abdunkelungs-Funktion verknüpfen? Das Problem daran ist, dass man mit CSS auf die Art nur Zugriff auf nachfolgende Geschwisterelemente der sich ändernden Elements und auf deren Kindelemente hat. Das `div` müsste also nach dem `input` im HTML stehen. Ob das für Nutzer assitiver Technologien (Screenreader) sinnvoll ist? Dennoch kann man es aber zumindest _visuell_ über das Eingabefeld setzten: Flexbox mit `order`, absolute Positionierung, … Die absolute Positionierung bezieht sich in dem einfachen Beispiel auf den Viewport. Das gilt aber nur solange wie kein Vorfahrenelement (absolut, relativ, fix) positioniert ist; dann hätte die Blende nur noch die Ausmaße dieses Elements. Die Blende kann aber nicht weite oben im DOM stehen, da man dann wie gesagt keinen Zugriff mit CSS darauf hat. Ein robuste Lösung braucht doch etwas JavaScript: Bei `focus` wird dem `html`-Element eine Klasse verpasst, bei `blur` wieder weggenommen. Das funktioniert das auch mit mehren Eingabefelden, ohne dass jedes seine eigene Blende braucht. Und für die eine Blende braucht man gar kein Element im HTML mehr, das kann ein Pseudoelement sein. [Sieht dann so aus.](http://codepen.io/gunnarbittersmann/pen/rVbGJO) Allerdings wird `z-index: 1` nur beim Fokussieren eines Eingabelders nur für dieses gesetzt. Einge gescheite Transition dafür zu bauen überlasse ich mal dir. **Nachtrag:** Dann kann natürlich auch das `div` im DOM stehen wo es will. LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.

@@Jule > Das heißt ich müsste wahrscheinlich ein DIV über dem Textfeld plazieren, dieses ausblenden und mit deiner Abdunkelungs-Funktion verknüpfen? Das Problem daran ist, dass man mit CSS auf die Art nur Zugriff auf nachfolgende Geschwisterelemente der sich ändernden Elements und auf deren Kindelemente hat. Das `div` müsste also nach dem `input` im HTML stehen. Ob das für Nutzer assitiver Technologien (Screenreader) sinnvoll ist? Dennoch kann man es aber zumindest _visuell_ über das Eingabefeld setzten: Flexbox mit `order`, absolute Positionierung, … Die absolute Positionierung bezieht sich in dem einfachen Beispiel auf den Viewport. Das gilt aber nur solange wie kein Vorfahrenelement (absolut, relativ, fix) positioniert ist; dann hätte die Blende nur noch die Ausmaße dieses Elements. Die Blende kann aber nicht weite oben im DOM stehen, da man dann wie gesagt keinen Zugriff mit CSS darauf hat. Ein robuste Lösung braucht doch etwas JavaScript: Bei `focus` wird dem `html`-Element eine Klasse verpasst, bei `blur` wieder weggenommen. Das funktioniert das auch mit mehren Eingabefelden, ohne dass jedes seine eigene Blende braucht. Und für die eine Blende braucht man gar kein Element im HTML mehr, das kann ein Pseudoelement sein. [Sieht dann so aus.](http://codepen.io/gunnarbittersmann/pen/rVbGJO) Allerdings wird `z-index: 1` nur beim Fokussieren eines Eingabelders nur für dieses gesetzt. Einge gescheite Transition dafür zu bauen überlasse ich mal dir. LLAP 🖖 -- Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.