Style real controls, never replace them

Every effect here restyles a genuine <input> — the toggle switch is a checkbox, the animated tick is a checkbox, the shake is applied to a text field. That matters enormously: a real input arrives with keyboard operability, form submission, screen reader semantics and browser autofill already working.

The common alternative — building a "toggle" from divs and click handlers — throws all of that away and then requires re-implementing it badly with ARIA. appearance: none lets you strip a control's native styling while keeping its native behaviour, and that's the technique underpinning this whole category.

Focus styling is not optional

The single most damaging thing done to forms is outline: none with nothing to replace it. It removes the only indication of where a keyboard user is, turning a form into an invisible maze. If you dislike the default outline, replace it — a focus ring built from box-shadow, as the focus-glow effect here does, is both attractive and compliant.

Use :focus-visible rather than :focus so the ring appears for keyboard navigation but not on mouse clicks, which is the behaviour most designers actually want.

Floating labels and the placeholder trap

The floating-label effect uses a pure-CSS trick: a placeholder of a single space makes :placeholder-shown a reliable test for whether the field is empty, so the label can move without JavaScript.

What it must never do is replace the label entirely. Placeholder-only fields lose their description the moment the user types, fail contrast requirements at default styling, and confuse screen readers. Floating labels work precisely because the label persists — it moves rather than disappearing.

Validation feedback that helps

The shake animation signals a problem instantly, but motion alone isn't enough: colour and movement are not accessible signals on their own. Pair the shake with a text message describing what's wrong and how to fix it, associate it with the field using aria-describedby, and set aria-invalid. Add the shake class on failed submission and remove it on animationend so it can fire again next time.

Frequently asked questions

How do I style a checkbox or toggle without breaking accessibility?

Use appearance: none on a real input element and style it with CSS, including its ::before pseudo-element. The control keeps keyboard operability, form submission and screen reader semantics — everything a div-based replacement loses.

Is it okay to remove the focus outline?

Only if you replace it with something equally visible, such as a box-shadow focus ring. Removing focus styling with nothing in its place makes a form unusable by keyboard and fails WCAG.

Can floating labels replace the label element?

No. Floating labels work because the label persists and moves rather than disappearing. Placeholder-only fields lose their description as soon as the user types and cause problems for screen readers.

Related categories

← Back to all 72 CSS animations