עזרה עם checkbox

[chebis]

עזרה עם checkbox

יש לי את הקוד הבא:


<div class="box">
<label class="checkbox-inline mail">
<input type="checkbox">הנני מאשר/ת קבלת חומרים פרסומיים ב-SMS ובמייל
</label>
<br>
<label class="checkbox-inline regulations">
<input type="checkbox">הנני מאשר/ת שקראתי את תקנון מועדון הלקוחות
</label>
</div>

CSS:

input[type=checkbox] {
display: none;
}
.box label.mail {
background: url(https://timg.co.il/f/checkbox.png) no-repeat 345px -20px;
}
.box label.mail:checked {
background-position: 345px 0;
}
.box label.regulations {
background: url(https://timg.co.il/f/checkbox.png) no-repeat 321px -20px;
}
.box label.regulations :checked {
background-position: 322px 0;
}

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

 

[חננה013]

כמה דברים

• קודם כל - אל תגדיר לצ'קבוקסים עצמם display none. במקום זה יש להגדיר:
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 0;
  כל ההגדרות הללו יחד יגרמו שלא ייראו ולא ירגישו את הצ'קבוקס על המסך.
• מבחינת הHTML הייתי מגדירה את הצ'קבוקס מחוץ ולפני הlabel. כך ניתן להגדיר עיצוב לlabel שנמצא מיד אחרי צ'קבוקס מסומן (siblings).

תוכל לראות קוד שכתבתי לפילטר באתר אלקטרה (בפילטרים בצד ימין. לוקח כמה שניות של טעינה).
http://www.electra-trade.co.il/product/
בהצלחה! עדכן איך הולך