Hogyan lehet CSS segítségével stílusozni a…

A jelölőnégyzet stílusozásához könyvtárak nélkül használhatja a standard elem elrejtésének és a ::before vagy ::after pszeudo-elem stílusozásának kombinációját, amely a szülő <label>-hez kapcsolódik.

A standard jelölőnégyzet elrejtése:

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

Stílusozható "négyzet" létrehozása a <label> pszeudo-elemével:

input[type="checkbox"] + label::before {
  content: ''; /* Kötelező a pszeudo-elem megjelenítéséhez */
  display: inline-block;
  width: 1em; /* A négyzet mérete */
  height: 1em; /* A négyzet mérete */
  border: 1px solid #ccc; /* A négyzet kerete */
  margin-right: 0.5em; /* Margó a címke szövegétől */
  vertical-align: middle; /* Függőleges igazítás */
  /* Egyéb stílusok: background-color, border-radius, box-shadow */
}

A kijelölt állapot stílusozása:

A checked szelektort használva az input-on, és ennek megfelelően módosítva a label pszeudo-elem stílusát.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* A kijelölt jelölőnégyzet háttérszíne */
  border-color: #007bff; /* A kijelölt jelölőnégyzet keretének színe */
  /* Egyéb stílusok, ha szükséges */
}

„pipa” (vagy más indikátor) hozzáadása:

Használhat második pszeudo-elem (::after) vagy a meglévő ::before stílusának módosítását background-image (svg, data-url) vagy border stílus alkalmazásával.

Példa a border használatára a pipa kialakításához:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* A pipa vonalának szélessége */
  height: 0.7em; /* A pipa vonalának magassága */
  border-right: 2px solid white; /* A pipa jobb része */
  border-bottom: 2px solid white; /* A pipa alsó része */
  transform: rotate(45deg); /* Forgatás a pipa kialakításához */
  position: absolute; /* Pozícionáláshoz a `::before` belsejében */
  top: 0.1em; /* Pozíció finomhangolása */
  left: 0.3em; /* Pozíció finomhangolása */
  /* A szülő `label::before`-nak `position: relative;`-nak kell lennie */
}

A megfelelő működéshez az utolsó példában a input[type="checkbox"] + label::before-hoz adjunk position: relative;-t:

input[type="checkbox"] + label::before {
  /* ... korábbi stílusok ... */
  position: relative; /* A `::after` pozícionálásához */
}

Ez a megközelítés teljes kontrollt biztosít a checkbox megjelenése felett, és jó hozzáférhetőséget is, mivel az alapértelmezett elem továbbra is létezik és reagál a felhasználói műveletekre (kattintás, fókusz). Fontos, hogy az input és a label összekapcsolódjon az id és for attribútumok segítségével a helyes működés érdekében.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Elfogadom a feltételeket</label>

Hogyan lehet CSS segítségével stílusozni a jelölőnégyzeteket könyvtárak nélkül?