Kutishlarni kutubxonalarisiz CSS yordamida qanday…

Kodni tanlash uchun kutubxonalar bo'lmagan holda, standart elementni yashirish va <label> bilan bog'langan ::before yoki ::after pseudo-elemntlarini stiliz qilish kombinatsiyasidan foydalanish mumkin.

Standart tanlashni yashirish:

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

Stilga mos "kvadrat" yaratish uchun <label> pseudo-elemntidan foydalanish:

input[type="checkbox"] + label::before {
  content: ''; /* Pseudo-elemntni ko'rsatish uchun majburiy */
  display: inline-block;
  width: 1em; /* Kvadrat o'lchami */
  height: 1em; /* Kvadrat o'lchami */
  border: 1px solid #ccc; /* Kvadrat chegarasi */
  margin-right: 0.5em; /* Matndan bo'sh joy */
  vertical-align: middle; /* Vertikal tekislik */
  /* Boshqa ixtiyoriy uslublar: background-color, border-radius, box-shadow */
}

Belgilanadigan holat uchun uslub:

checked selektoridan foydalanamiz va label pseudo-elemntining uslubini o'zgartiramiz.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Belgilangan checkbox fon rangi */
  border-color: #007bff; /* Belgilangan checkbox ramka rangi */
  /* Boshqa ixtiyoriy uslublar */
}

"Check" yoki boshqa indikator qo'shish:

Ikkinchi pseudo-elemnt (::after) yoki mavjud ::beforeni background-image (svg, data-url) yoki border uslublari bilan stiliz qilish mumkin.

border yordamida check belgisini yaratish misoli:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Check chizig'ining kengligi */
  height: 0.7em; /* Check chizig'ining balandligi */
  border-right: 2px solid white; /* Checkning o'ng qismi */
  border-bottom: 2px solid white; /* Checkning past qismi */
  transform: rotate(45deg); /* Check shaklini hosil qilish uchun burish */
  position: absolute; /* ::before ichida joylash uchun */
  top: 0.1em; /* Pozitsiya sozlamasi */
  left: 0.3em; /* Pozitsiya sozlamasi */
  /* `input[type="checkbox"] + label::before` ga `position: relative;` qo'shilishi mumkin */
}

Bu misolni to'g'ri ishlashi uchun, input[type="checkbox"] + label::before ga position: relative; qo'shing:

input[type="checkbox"] + label::before {
  /* ... avvalgi uslublar ... */
  position: relative; /* ::after uchun qo'shiladi */
}

Ushbu yondashuv checkboxning tashqi ko'rinishini to'liq nazorat qilish va yaxshi kirish imkoniyatini ta'minlaydi, chunki standart element hali mavjud va foydalanuvchi harakatlariga (klik, fokus) javob beradi. input va labelni id va for atributlari yordamida bog'lash muhim, shunda matnni bosganda to'g'ri ishlaydi.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Shartlarga rozilik bildiraman</label>

Kutishlarni kutubxonalarisiz CSS yordamida qanday stiliz qilish mumkin?