css kompatibelität IE / Edge

[Rolf B]

Hallo bugfix,

Du hast da eine Regel mit einem "Oder" Selektor drin:

form input[type="text"]:focus + label,
form input[type="text"]:not(:placeholder-shown) + label,
form textarea:focus + label,
form textarea:not(:placeholder-shown) + label,
form .field:hover label {
  width: 18%;
}

IE und Edge kennen placeholder-shown nicht und verwerfen deshalb die ganze Regel, nehme ich an.

Du kannst das also so nicht machen. Der Edge-Edge wird noch eine Weile aktiv sein, und auf dem IE sollte Progressive Enhancement geschehen statt total unusablility. Das CSS muss so gestaltet sein, dass die neuen Elemente das gewünschte Feature hinzufügen, und für IE und Edge müssen die Labels per Default eingefahren sein.

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%;
}

Das ist jetzt aus der Hüfte geschossen, ob's funktioniert musst Du ausprobieren.

Rolf