Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada nostandart checkbox shakllantiramiz. Buning uchun biz CSSning ajoyib uslublaridan foydalanamiz. Albatta, HTMLdan ham foydalanamiz)

 

Veb-dasturchilar sayt ishlab chiqish davomida forma uchun yoki yana biror bir ehtiyoj uchun veb-sahifaga checkbox qo'yishlariga to'g'ri keladi. Lekin oddiy checkbox turli brauzerlarda turlicha namoyon bo'ladi va kontent sifatini va chiroyini buzib qo'yishi mumkin. Shuning uchun yagona va universal checkbox turini shakllantirish ehtiyoji dasturchida tug'iladi. Bu ehtiyojni qondirish uchun men bir yechimni taklif etaman.

Bosilmagan paytdagi ko'rinish
Bosilmagan paytdagi ko'rinish

  Checkbox bosilgandan keyin:

Bosilgandan keyin
Bosilgandan keyin

Keling, kod yozishga o'tamiz:

Bilamizki, checkbox hosil qilish uchun input dan foydalanamiz. Zarur so'zni shunchaki yozib qo'yish mumkin edi, ammo so'zning ustiga bosilganda ham ishlaydigan qilish ma'qulroq bo'ladi deb o'ylayman. Shuning uchun ham label tegidan foydalanamiz. Bunda inputning id si va labelning for i bir aynan bir xil bo'lishi shart. 

 

HTML:

<input type="checkbox" id="kitob" name="maktab">
<label for="kitob">Kitob</label>
<br>
<br>
<input type="checkbox" id="daftar" name="maktab">
<label for="daftar">Daftar</label>
<br>
<br>
<input type="checkbox" id="ruchka" name="maktab">
<label for="ruchka">Ruchka</label>

 

CSS da avvalo checkboxni display: none;  holatiga o'tqazamiz, chunki bizga standart ko'rinish kerak emas. label elementi uchun ::before psevdoelementidan foydalanamiz. Labelning oldida ichi bo'sh aylanani hosil qiladi. So'ngra input[type="checkbox"]:checked + label::before {} ning ichiga galochkaga o'xshash surat qo'yamiz. Men svg rasmdan foydalanaman. Ushbu kod qachonki checkbox bosilganda nima amal bajarish kerak ekanligini aniqlaydi.  Bizga rasm paydo bo'lishi kerak, demak background-image: url(/*rasm URL-manzili*/)  ni yozamiz! 

 

CSS:

input[type="checkbox"] {
  display: none;
}
label {
  padding-left: 20px;
}
label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: -10px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid green;
}
input[type="checkbox"]:checked + label::before {
  content: '';
  background-size: 100%;
  background-image: url(/*rasm URL-manzili*/)
}

 

Mana shu oddiygina yechim!

Endi natijani ko'ramiz:

Natija
Natija

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!