css kompatibelität IE / Edge
bearbeitet von Rolf BHallo Rolf,
> Der Default für das Label muss also width:18% sein, und dann musst Du alle Pseudoklassen-Abfragen umdrehen. Also so:
~~~css,bad
form input[type="text"]:not(:focus) + label,
form input[type="text"]:placeholder-shown + label,
form textarea:not(:focus) + label,
form textarea:placeholder-shown + label,
form .field:not(:hover) label {
width: 100%;
}
~~~
Der Schuß aus der Hüfte ging in den Fuß. Lieber Rolf, du hast andere schon so oft an De Morgan erinnert, also denk auch selbst dran.
Ein negiertes ODER wird zum UND, man muss die Komma-Auflistung (die ein ODER darstellt) also in ein UND ändern. Das geht so:
~~~css,bad
form .field:not(:hover) input[type="text"]:placeholder-shown:not(:focus) + label,
form .field:not(:hover) textarea:placeholder-shown:not(:focus) + label {
width: 100%;
}
~~~
Weitere empfehlenswerte Änderungen:
- `margin-bottom:1.5em` in form .field ändern in `padding-bottom:1.5em`. Andernfalls gibt's Geflacker beim Hovern im input/textarea Bereich.
- `height:100%` statt 4em in form .field label. Andernfalls ragen die Labels mit ihrem Padding unten über das .field div hinaus und führen ebenfalls zu instabilem Hovern.
_Rolf_
--
sumpsi - posui - obstruxi