Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
From there, a special message pops …
/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work 
I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="..."/>) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value]…
The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label …
