1
HTML/CSSAdvanced#css#design-systems
HTML/CSSIntermediate#css#forms#pseudo-classes
How do you style form validation states using CSS pseudo-classes?
:valid and :invalid style inputs based on constraint validation results, :required/:optional target mandatory fields, and :placeholder-shown detects empty inputs still showing placeholder text — enabling live feedback without JavaScript.
Example
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:required:placeholder-shown { border-color: orange; }