CSS pseudo-element input-placeholder::after to show with or without value in text box

Question

I\'m trying to get some UI flagging on form elements for the user after validation to work using the placeholder pseudo elements (starting with text boxes). What I want is t

Answer 1

Once the user starts typing in the input box, the browser is going to hide the placeholder, and with it, your X.

Unfortunately, you can't place it next to the input with :after, because that is not currently supported.

If you're attached to having the X next to the input, I would suggest placing a div next to input, and adding/showing the X when necessary.

Otherwise, I would move the X like you move the placeholder.

On focus, you set the placeholder to " " and give the label a color. This makes the label visible to the user and keeps a placeholder present, that you X can be :after. You could instead, set the placeholder to "", which would remove your X from the input box, but add an :after or :before to you label, and display the X there.

CSS to display X after label

.input-invalid.input-focused label:after,
.input-invalid.input-has-value label:after {
    content: "  \2716";
}