Китепканаларсыз 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 менен чекбоксуларды кантип стилизациялоо керек?