Ich versuche, einige Benutzeroberflächen-Flaggen für Formularelemente zu erstellen, damit der Benutzer nach der Validierung die Platzhalter-Pseudoelemente verwenden kann (beginnend mit Textfeldern). Was ich will ist das::input-placeholder::after Pseudoelement, das angezeigt werden soll, wenn sowohl ein Wert im Textfeld als auch kein Wert im Textfeld vorhanden ist (z. B. wenn ein ungültiger Wert vorhanden ist oder ein Wert erforderlich ist - sollte das rote " X "ganz rechts im Textfeld über das::input-placeholder::after Pseudo-Element).

Hier ist die Geige:https: //jsfiddle.net/edsinek/L8u7s25d

Hier ist ein Ausschnitt aus dem CSS, mit dem ich das "X" für einen ungültigen Wert zeige:

.input-invalid input[type=text]::-webkit-input-placeholder::after {
  content: "\2716"; // "X"
  font-size: 18px;
  color: #ff0000;
  padding-right: 0;
  float: right;
}

Hinweis: Im Moment programmiere ich nur für Chrome, also vergib das Webkit-spezifische Zeug.

Irgendwelche Ideen? Oder ist das nicht möglich und UA-abhängig?