nicht angemeldet
Gunnar Bittersmann@@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.
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 sein.
Auge