Kitabxanalardan istifadə etmədən CSS ilə yoxlama…

Kitabxona olmadan onay qutusunu stilizə etmək üçün standart elementi gizlətmək və <label> ilə əlaqəli ::before və ya ::after pseudo-elementlərini stilizə etmək kombinasyonundan istifadə edə bilərsiniz.

Standart onay qutusunu gizlətmək:

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

Stil verilmiş "kvadrat" yaratmaq üçün <label> pseudo-elemntindən istifadə:

input[type="checkbox"] + label::before {
  content: ''; /* Pseudo-elemntin göstərilməsi üçün vacibdir */
  display: inline-block;
  width: 1em; /* Kvadratın ölçüsü */
  height: 1em; /* Kvadratın ölçüsü */
  border: 1px solid #ccc; /* Kvadratın sərhədi */
  margin-right: 0.5em; /* Mətn ilə kvadrat arasında boşluq */
  vertical-align: middle; /* Dərqi hizalama */
  /* Digər istəyə bağlı stil: background-color, border-radius, box-shadow */
}

İşarələnmiş vəziyyət üçün stil:

checked seçicisini istifadə edirik və label pseudo-elemntinin stilini uyğun olaraq dəyişirik.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* İşarələnmiş qutunun fon rəngi */
  border-color: #007bff; /* İşarələnmiş qutunun sərhəd rəngi */
  /* Digər istəyə bağlı stil */
}

"Hə" və ya başqa göstərici əlavə etmək:

İkinci pseudo-elemnt (::after) istifadə edə və ya mövcud ::before-u background-image (svg, data-url) və ya sərhəd stili ilə stilizə edə bilərsiniz.

Hə üçün border ilə nümunə:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Hə xətinin eni */
  height: 0.7em; /* Hə xətinin hündürlüyü */
  border-right: 2px solid white; /* Hə'nin sağ hissəsi */
  border-bottom: 2px solid white; /* Hə'nin aşağı hissəsi */
  transform: rotate(45deg); /* Hə yaratmaq üçün döndürmə */
  position: absolute; /* ::before daxilində yerləşdirmək üçün */
  top: 0.1em; /* Mövqe tənzimləməsi */
  left: 0.3em; /* Mövqe tənzimləməsi */
  /* `input[type="checkbox"] + label::before` üçün position: relative; lazım ola bilər */
}

Bu nümunənin düzgün işləməsi üçün, input[type="checkbox"] + label::before-a position: relative; əlavə edin:

input[type="checkbox"] + label::before {
  /* ... əvvəlki stilər ... */
  position: relative; /* ::after üçün əlavə edildi */
}

Bu yanaşma, onay qutusunun görünüşünü tam idarə etməyə və yaxşı əlçatanlıq təmin etməyə imkan verir, çünki standart element hələ də mövcuddur və istifadəçi hərəkətlərinə (klik, fokus) cavab verir. input və label-i id və for atributları ilə əlaqələndirmək vacibdir ki, etiket mətninə klikləmə zamanı düzgün işləsin.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Şərtlərlə razıyam</label>

Kitabxanalardan istifadə etmədən CSS ilə yoxlama qutularını necə tərtib etmək olar?