נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

עיצוב 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);
}

 

 

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

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

 

= 4 + 9