CSS-Checkbox-Generator

Was das erzeugte CSS leistet

Die Regel wird direkt auf das Eingabefeld mit appearance: none angewendet, wodurch die Standarddarstellung entfernt wird, damit die Box gestaltet werden kann:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Wenn die Checkbox aktiviert ist, füllt sie sich mit der gewählten Farbe und ein weißes Häkchen erscheint, das mit CSS gezeichnet wird:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Warum ein natives Eingabefeld

Der Stil ersetzt das Element nie durch ein div: Das echte <input type="checkbox"> behält seine Tastaturbedienung, die Screenreader-Unterstützung und die Formularübermittlung. appearance: none ändert nur das Aussehen. Wenn Sie ältere Safari-Versionen unterstützen müssen, ergänzen Sie -webkit-appearance: none in der Regel.

Fokus und Hover

Die erzeugte Regel enthält einen weichen Farbübergang, aber keine Hover- oder Fokus-Styles. Ergänzen Sie eigene Regeln für :hover und :focus-visible, damit Tastaturnutzer immer sehen, wo der Fokus liegt, zum Beispiel einen farbigen Rahmen um die Box.

Das Häkchen

Das Häkchen ist eine kleine weiße Linie, die um 45 Grad gedreht wird. Wenn Sie eine andere Farbe oder einen dünneren oder dickeren Strich benötigen, bearbeiten Sie die Werte border und border-width in der ::after-Regel.