Чӣ гуна бо CSS бе истифодаи китобхонаҳо чекбоксҳоро…

Барои стилизации чекбокс бе китобхонаҳо, шумо метавонед истифода баред комбинасияи пинҳон кардани унсури стандартӣ ва стилизатсияи псевдоэлементҳо ::before ё ::after, ки бо <label>-и падар алоқаманд аст.

Пинҳон кардани чекбокс стандартӣ:

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

Эҷоди "чоркунҷа" бо псевдоэлемент <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Зарур барои намоиши псевдоэлемент */
  display: inline-block;
  width: 1em; /* Андозаи чоркунҷа */
  height: 1em; /* Андозаи чоркунҷа */
  border: 1px solid #ccc; /* Чаҳорчӯбаи чоркунҷа */
  margin-right: 0.5em; /* Мардониат аз матни тамға */
  vertical-align: middle; /* Тартиби росткунҷа дар рост */
  /* Стили дигар: background-color, border-radius, box-shadow */
}

Стил барои ҳолати интихобшуда:

Мо селектор checked барои input истифода мебарем ва стилҳоро барои псевдоэлемент label тағир медиҳем.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Ранги фон барои чекбокс интихобшуда */
  border-color: #007bff; /* Ранги чаҳорчӯбаи чекбокс интихобшуда */
  /* Стили дигар, агар лозим бошад */
}

Илова кардани "галочка" (ё дигар нишондиҳанда):

Мумкин аст истифода баред псевдоэлементи дуввум (::after) ё стилизация кардани ::before бо background-image (svg, data-url) ё border.

Мисол бо border барои сохтани галочка:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Тарозуи хатти галочка */
  height: 0.7em; /* Баландии хатти галочка */
  border-right: 2px solid white; /* Рақиби қисми галочка */
  border-bottom: 2px solid white; /* Поёни қисми галочка */
  transform: rotate(45deg); /* Тарҷума барои шакли галочка */
  position: absolute; /* Барои ҷойгиршавӣ дар `::before` */
  top: 0.1em; /* Танзими ҷойгиршавӣ */
  left: 0.3em; /* Танзими ҷойгиршавӣ */
  /* Родител `label::before` метавонад ниёз ба `position: relative;` дошта бошад */
}

Барои кор кардани дурустии мисоли охирин, ба input[type="checkbox"] + label::before илова кунед position: relative;:

input[type="checkbox"] + label::before {
  /* ... стилҳои қаблӣ ... */
  position: relative; /* Барои ҷойгиршавии `::after` */
}

Ин усул тамоми назоратро дар бораи намуди чекбокс таъмин мекунад ва ҳамзамон дастрасиро хуб мекунад, зеро унсури стандартӣ ҳоло ҳам вуҷуд дорад ва ба амалҳои корбар (клик, фокус) ҷавоб медиҳад. Муҳим аст, ки input-ро бо label тавассути id ва for пайваст кунед, то ки дар клик ба матни тамға кор кунад.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Маъқул аст шартҳо</label>

Чӣ гуна бо CSS бе истифодаи китобхонаҳо чекбоксҳоро стиль кардан мумкин аст?