תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

עיצוב 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 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מתי הוקמה המדינה?

 

תמונת המגיב

מוטי בתאריך: 09.03.2018

אחלה אתר מגניב

תמונת המגיב

יוסי בן הרוש בתאריך: 09.03.2018

בשמחה, מוטי.