appearance: none

A switch that is still a checkbox

CaveatStyle the input itself rather than hiding it behind a div. appearance: none strips the paint and keeps everything else — focus, the space key, the label association, the announced role.

FallbackWhere the styling is unsupported you get the platform checkbox. It is not the design, but it is a working control, which a styled div would not be.

input[type="checkbox"] {
  /* paint gone, semantics kept */
  appearance: none;
  width: 44px; height: 25px;
  border-radius: 999px;
}
input:checked::after { translate: 19px 0; }

Published 11 Aug 2026