custom checkbox – 2

January 4, 2016

3 תגובות

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

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

הדרך הראשונה והפשוטה יותר, משתמשת בשלוש תגיות html. השניה אמנם לא נזקקת ליותר מאשר תגית ה checkbox עצמה – אך דורשת הגדרות css מתקדמות יותר.

שיטה ראשונה

ה HTML:

Code Snippet
<body>
    <label>
        <input type=”checkbox” name=”option1″ />
        <span>option 1</span>
    </label>
    <label>
        <input type=”checkbox” name=”option2″ />
        <span>option 2</span>
    </label>
    <label>
        <input type=”checkbox” name=”option3″ />
        <span>option 3</span>
    </label>
    <label>
        <input type=”checkbox” name=”option4″ />
        <span>option 4</span>
    </label>
    <label>
        <input type=”checkbox” name=”option5″ />
        <span>option 5</span>
    </label>
</body>

הרעיון הכללי הוא שאם מאגדים את ה checkbox יחד עם טקסט או אלמנט נוסף (במקרה שלנו span) בתוך תגית label – הם הופכים להיות “קשורים” ל checkbox ולחיצה על הטקסט תגרום לסימון של  ה checkbox.

וכעת לטריק:

Code Snippet
<style>
    label input{
        display: none;
    }

    label span{
        height: 40px;
        width: 100px;
        display: inline-block;
        background-color: #eaebec;
        font-family: Arial;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
    }

    label input:checked + span{
        background-color: #ffce4b;
    }
</style>

בהגדרת  css הראשונה העלמתי את ה checkbox לחלוטין (כאמור אני לא צריך אותו יותר היות ולחיצה על ה span תגרום לסימונו מאחורי הקלעים).

בהגדרה השניה אני נותן את העיצוב הרצוי ל span (הגדרות די זהות להגדרות בהם השתמשתי בפוסט הקודם לעיצוב ה div החיצוני – למעט המיותר).

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

שיטה שניה

HTML:

Code Snippet
<body>
    <input type=”checkbox” name=”option1″ data-option=”option1″ />
    <input type=”checkbox” name=”option2″ data-option=”option2″ />
    <input type=”checkbox” name=”option3″ data-option=”option3″ />
    <input type=”checkbox” name=”option4″ data-option=”option4″ />
    <input type=”checkbox” name=”option5″ data-option=”option5″ />
</body>

בעצם כמו קודם יש לנו 5 תיבות-סימון, אלא שנוסף כאן attribute בשם data-option שמיד נראה איך משתמשים בו:

css:

Code Snippet
<style>
    input{
        height: 0px;
        width: 0px;
        margin-right: 100px;
        margin-bottom: 40px;
    }

    input::after{
        content: attr(data-option);
        height: 40px;
        width: 100px;
        display: inline-block;
        background-color: #eaebec;
        font-family: Arial;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
    }

    input:checked::after{
        background-color: #ffce4b;
    }
</style>

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

באותו קטע אנו גם תופסים באופן מלאכותי את השטח שעליו אמור להיות ה pseudo-element – כדי שהם לא יעלו אחד מעל לשני.

בשלב הבא אנו מייצרים את ה pseudo-element – after, הגדרה זו מוסיפה אלמנט דמה מיד לאחר ה checkbox, כאן אני משתמש שוב באותם הגדרות css כמקודם עם תוספת אחת חשובה – content, מאפיין זה אומר איזה טקסט יכנס לתוך האלמנט,  כשבמקרה שלנו במקום לתת ערך סטטי אני משתמש בפונקציה בשם attr() אשר יודעת לקבל שם של attribute  כלשהו ולחלץ את התוכן שלו. כאן כמובן זהו ה attribute הזכור מקטע ה HTML שלמעלה – data-option. (הערה: השם data-option הוא שם שאני בחרתי ואתם רשאים לקרוא לו בכל שם שתחפצו, אם כי שימו לב שנהוג שהשם יתחיל ב {data-{name)

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

כעת כל מה שנשאר לנו זה לתת צבע רקע שונה במקרה שה checkbox מסומן – וזה מה שעושה הגדרת ה css האחרונה.

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

הקוד המלא של השיטה הראשונה:

Code Snippet
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title></title>

    <style>
        label input{
            display: none;
        }

        label span{
            height: 40px;
            width: 100px;
            display: inline-block;
            background-color: #eaebec;
            font-family: Arial;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }

        label input:checked + span{
            background-color: #ffce4b;
        }
    </style>

</head>
<body>
    <label>
        <input id=”hjkh” type=”checkbox” name=”option1″ />
        <span>option 1</span>
    </label>
    <label>
        <input id=”hjkh” type=”checkbox” name=”option2″ />
        <span>option 2</span>
    </label>
    <label>
        <input id=”hjkh” type=”checkbox” name=”option3″ />
        <span>option 3</span>
    </label>
    <label>
        <input id=”hjkh” type=”checkbox” name=”option4″ />
        <span>option 4</span>
    </label>
    <label>
        <input id=”hjkh” type=”checkbox” name=”option5″ />
        <span>option 5</span>
    </label>
</body>
</html>

הקוד המלא של השיטה השניה:

Code Snippet
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title></title>

    <style>
        input{
            height: 0px;
            width: 0px;
            margin-right: 100px;
            margin-bottom: 40px;
        }

        input::after{
            content: attr(data-option);
            height: 40px;
            width: 100px;
            display: inline-block;
            background-color: #eaebec;
            font-family: Arial;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }

        input:checked::after{
            background-color: #ffce4b;
        }
    </style>

</head>
<body>
    <input type=”checkbox” name=”option1″ data-option=”option1″ />
    <input type=”checkbox” name=”option2″ data-option=”option2″ />
    <input type=”checkbox” name=”option3″ data-option=”option3″ />
    <input type=”checkbox” name=”option4″ data-option=”option4″ />
    <input type=”checkbox” name=”option5″ data-option=”option5″ />
</body>
</html>

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

3 תגובות

  1. שימריתJanuary 4, 2016 ב 11:02 am

    יפה מאוד!!!
    פוסט מענין וברור ..
    בהצלחה 🙂

    Reply
  2. שלוםJanuary 4, 2016 ב 11:09 am

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

    Reply
  3. אברהםJanuary 5, 2016 ב 9:41 pm

    יפה מאוד!!

    Reply