Generator checkboxów CSS

Co robi wygenerowany CSS

Reguła jest stosowana bezpośrednio do pola input z właściwością appearance: none, która usuwa domyślny wygląd, aby można było wystylizować pole:

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

Gdy checkbox jest zaznaczony, pole wypełnia się wybranym kolorem i pojawia się biały znacznik wyboru narysowany w CSS:

.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);
}

Dlaczego prawdziwe pole input

Styl nigdy nie zamienia elementu na div: prawdziwe <input type="checkbox"> zachowuje obsługę klawiatury, czytników ekranu i wysyłanie formularzy. appearance: none zmienia tylko wygląd. Jeśli musisz obsługiwać starsze wersje Safari, dodaj do reguły -webkit-appearance: none.

Fokus i najechanie

Wygenerowana reguła zawiera płynne przejście koloru, ale nie zawiera stylów najechania ani fokusu. Dodaj własne reguły dla :hover i :focus-visible, aby użytkownicy klawiatury zawsze widzieli, gdzie jest fokus, na przykład kolorowy obrys wokół pola.

Znacznik wyboru

Znacznik to mała biała linia obrócona o 45 stopni. Jeśli potrzebujesz innego koloru albo cieńszej lub grubszej kreski, edytuj wartości border i border-width w regule ::after.