Kuidas stiilida kontrollnupud CSS-i abil ilma…

Ilma raamatukogudeta saab stiilida märkeruut, kasutades standardelemendi peitmist ja pseudo-elementide ::before või ::after stiilimist, mis on seotud vanem <label>-iga.

Standardmärkeruudu peitmine:

input[type="checkbox"] {
  display: none; /* või visibility: hidden; height: 0; width: 0; */
}

Stiilse "ruudu" loomine pseudo-elemendi <label> abil:

input[type="checkbox"] + label::before {
  content: ''; /* Nõutav pseudo-elemendi kuvamiseks */
  display: inline-block;
  width: 1em; /* Ruudu suurus */
  height: 1em; /* Ruudu suurus */
  border: 1px solid #ccc; /* Ruudu ääris */
  margin-right: 0.5em; /* Vahe tekstist */
  vertical-align: middle; /* Vertikaalne joondus */
  /* Muud stiilid: background-color, border-radius, box-shadow */
}

Stiil märkeruudu valiku korral:

Kasutame checked selektorit input-i jaoks ja muudame vastavalt pseudo-elemendi label stiili.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Valitud märkeruudu taustavärv */
  border-color: #007bff; /* Valitud märkeruudu äärise värv */
  /* Muud stiilid vastavalt soovile */
}

"Tärn" või muu indikaatori lisamine:

Võite kasutada teist pseudo-elemendi (::after) või stiilida olemasolevat ::before kasutades background-image (svg, data-url) või border stiili.

Näide border-i kasutamisest tärnaks:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Tärni joone laius */
  height: 0.7em; /* Tärni joone kõrgus */
  border-right: 2px solid white; /* Tärni parem osa */
  border-bottom: 2px solid white; /* Tärni alumine osa */
  transform: rotate(45deg); /* Pööramine tärni kujundamiseks */
  position: absolute; /* Positsioneerimine `::before` sees */
  top: 0.1em; /* Positsiooni kohandamine */
  left: 0.3em; /* Positsiooni kohandamine */
  /* Vanem `label::before` võib vajada `position: relative;` */
}

Selleks, et viimane näide töötaks õigesti, lisage position: relative; input[type="checkbox"] + label::before-le:

input[type="checkbox"] + label::before {
  /* ... eelnevad stiilid ... */
  position: relative; /* `::after` positsioneerimiseks */
}

See lähenemine tagab täieliku kontrolli märkeruudu välimuse üle ning hea ligipääsetavuse, kuna standardelement on endiselt olemas ja reageerib kasutaja tegevustele (klõps, fookus). Oluline on siduda input ja label id ja for atribuutide abil, et see töötaks õigesti klõpsamisel teksti peal.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Nõustun tingimustega</label>

Kuidas stiilida kontrollnupud CSS-i abil ilma teekideta?