איך לעצב צאקבוקס מותאם אישית.
לפעמים יש דרישה לצאקבוקס ( chackbox ) אחר מותאם אישית, ולא את הצאקבוקס הרגיל, לא ניתן ב CSS לעצב רקע לצאקבוקס רגיל וכול מיני פיצרים שאנחנו רוצים, נסביר במדריך כמה דברים על CSS ונראה איך אפשר לעשות רקע לצאקבוקס וסימון אחר מהרגיל ע"י שימוש בתווית label והכל רק ע"י CSS בלא לערב JavaScript.
קודם כל דוגמא:
See the Pen pNBBmX by josef arazi (@shiran) on CodePen.
הסבר:
קודם כל ניתן קצת רקע :
הסלקטור + ב CSS משמעותו שאנחנו בוחרים את האלמנט שבא מייד אחרי האלמנט הראשון
לדוגמא :
p + div
בוחר את הדיב שבא מייד אחרי תג P
כדי לבחור אלמנט שמסומן אפשר לרשום:
input:checked
ודבר אחרון for ב label
<input type="checkbox" id="chk"> <label for="chk"></label>
ה for גורם לכך שיש קשר בין הצאקבוקס לתווית lable ז"א שאים לוחצים על התווים היא תסמן את הצאקבוקס שיש לו את ה ID שמצויין ב for שלה.
עכשיו הכל ברור…
לקחנו צאקבוקס הסתרנו אותו קישרנו תווית לצאקבוקס כל פעם שלוחצים על התווית אז הצאקבוקס גם נלחץ.
לאחר מכן עשינו שכאשר הצאקבוקס מסומן מקבלים סטייל שונה ואני מוסיף לו תוכן שהוא וי אפשר להוסיף כל תוכן אחר ריבוע מלא או להוסיף טקסט או לשנות לרקע אחר.
הקטע ב CSS שאחרי על כך שבלחיצה אני משנה את העיצוב של הלייבר ( label )
input:checked + label:after {
וכך בעצם אני מעצב את התווית שזה אפשרי לא כמו צאקבוקס, ואפשר לעצב כמעט כל דבר שרוצים.