States, Focus, and Honest Feedback

What this is. Interactive elements have states, and CSS can target each one.

:hover is the pointer being over it.

:focus-visible is keyboard focus, and it is the important one.

:disabled is unavailable.

:invalid is failing validation.

::placeholder styles the hint text inside a field.

✦ Never remove the focus outline

outline: none is the most damaging one-line change in front-end development. Someone navigating by keyboard loses all sense of where they are on the page, which makes the site unusable rather than merely awkward. If the default ring does not suit your design, replace it with something of your own that has real contrast. Use :focus-visible so the ring appears for keyboard users without appearing on every mouse click.

Validate kindly. Marking a field red before someone has finished typing is hostile. The :not(:placeholder-shown) guard above waits until there is actually content to judge. And color alone is never enough, because a red border is invisible to many color blind users. Pair it with text that says what is wrong.