עיצוב checkbox ו-radio באמצעות CSS3

אחת המשימות שמפתחים מתקשים אתם במיוחד היא שינוי מראה ה-checkbox וה-radio buttons בטפסים. במדריך זה נלמד כיצד להשתמש ב-CSS3 להשגת המטרה.

אתם מוזמנים ללחוץ על השדות בטופס להלן כדי לראות את הקוד שנלמד לפתח במדריך בפעולה:

עיצוב ה-radio buttons

נתחיל מההטמ"ל עבור שני radio buttons שעטופים בדיב :

<div class="styled-radio-wrapper">
    <label>כן
        <input type="radio" name="b" value="1">
        <span class="img"></span>
    </label>
    <label>לא
        <input type="radio" name="b" value="0">
        <span class="img"></span>
    </label>
</div>

בתוך ה-label נוסיף שני אלמנטים:

1. שדה radio
2. ספאן עם מחלקה img

את שדה ה-radio נסתיר ואת מקומו תתפוס תמונת רקע שנושיב בתוך הספאן.

נוסיף את ה-CSS

.styled-radio-wrapper label{
    cursor: pointer;
}
.styled-radio-wrapper input{
    visibility: hidden;
}
.styled-radio-wrapper input + .img{
   display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("img/radio_button_false.png");
    background-size:cover;
}
.styled-radio-wrapper input:checked + .img{
    background-image: url("img/radio_button_true.png");
}

נסתיר את השדה input באמצעות

visibility:hidden

הספאן ששייך למחלקה img מקבל תמונת רקע באמצעות background-image

הספאן img מזוהה באמצעות סלקטור "אח" (קשר שמסומן בפלוס) מפני שהוא סמוך לשדה input

.styled-radio-wrapper input + .img { 

}

מיד נראה למה השתמשנו בסלקטור הזה.

כדי שהספאן יראה את תמונת הרקע צריך להגדיר אותו כ

 display: inline-block;

לתת לו ממדים של אורך וגובה, ולהשתמש בתכונה של CSS3 שהיא

background-size:cover;

כדי למלא את כל שטח הספאן באמצעות תמונת רקע שאותה מגדירים באמצעות

background-image: url("img/radio_button_false.png");

במידה וה-radio הוא checked הוא מקבל פסאודו-קלאס של CSS3 שהוא :checked, ואז ניתן להגדיר לאלמנט תמונת רקע שונה

.styled-radio-wrapper input:checked + .img{
    background-image: url("img/radio_button_true.png");
}

עיצוב מראה ה-checkbox

ניתן להשתמש באותם רעיונות כדי לעצב את מראה ה-checkbox

ההטמ"ל

<div class="styled-checkbox-wrapper">
  <label>א
    <input type="checkbox" name="m[]" value="1">
    <span class="img">
  </label>
  <label>ב
    <input type="checkbox" name="m[]" value="2">
    <span class="img"></span>
   </label>
    <label>ג
      <input type="checkbox" name="m[]" value="3">
      <span class="img"></span>
    </label>
</div>

ה-CSS

.styled-checkbox-wrapper label{
  cursor: pointer;
}
.styled-checkbox-wrapper input{
  visibility: hidden;
}
.styled-checkbox-wrapper input + .img{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("img/checkbox_false.png");
  background-size:cover;
}
.styled-checkbox-wrapper input:checked + .img{
  background-image: url("img/checkbox_true.png");
}

התאמת האלמנטים לקוראי מסך ובעלי מוגבלויות

למה שהראיתי לכם במדריך עד עכשיו, יש חיסרון אחד בולט והוא שקוראי מסך בשירותם של לקויי ראייה לא יכולים ללחוץ על האלמנטים. אז בשביל לפתור את הבעיה נוסיף מספר תגיות, וגם נשתמש בקוד javascript שיעשה חלק מהעבודה.

<div class="styled-checkbox-wrapper">
  <label for="yes">כן
    <input type="checkbox" name="m[]" id="yes">
    <span class="img" tabindex="0" aria-checked="false"></span>
  </label>
</div>

• השדה for על ה-label צריך להתאים ל-id של השדה.
• div התמונה יקבל tabindex כדי שקורא המסך יוכל לעשות עליו פוקוס באותו אופן שהוא יכול להתפקס על כפתור או שדה בטופס.
• div התמונה יקבל aria-checked="false" כדי שקורא המסך יוכל לזהות האם האלמנט נבחר. הערך יכול להיות false או true.
• aria הוא תקן שמאפשר להעביר מידע לקוראי מסך.

בנוסף, צריך קצת javascript שיאזין לשינויים במצב השדה, ויעדכן בהתאם את ה- aria-checked

var visibleElem  = document.querySelector("#yes");
visibleElem.addEventListener("click", function(){
   var state = visibleElem.getAttribute("aria-checked");
    visibleElem.setAttribute("aria-checked", !state );
});

• אנחנו מאזינים להקלקה על האלמנט, ובתגובה להקלקה ניקח את ערכו של ה- aria-checked ונציב את הערך ההפוך באמצעות הסימן קריאה. כי כל הקלקה הופכת את ערכו של ה-checbox.

לכל מדריכי ה-CSS3

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים