css kompatibelität IE / Edge

[Rolf B]

Hallo Rolf,

Der Default für das Label muss also width:18% sein, und dann musst Du alle Pseudoklassen-Abfragen umdrehen. Also so:

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:

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