CSS Checkbox Generator

מהו הכלי הזה?

תיבות הסימון המובנות של הדפדפן נראות שונה בכל דפדפן וקשה לעצב אותן ישירות, מכיוון שהמראה המובנה שלהן מצויר על ידי מערכת ההפעלה ולא באמצעות CSS רגיל. הפתרון המקובל הוא להסתיר חזותית את תיבת הסימון המקורית ולעצב במקומה אלמנט אח, המבוסס על מצב ה-:checked של תיבת הסימון — השדה נשאר פונקציונלי ונגיש לחלוטין, רק המראה שלו משתנה.

הכלי הזה בונה את התבנית הזו עבור שלושה סגנונות נפוצים של תיבות סימון: תיבה מעוגלת עם סימן וי מונפש, מתג הזזה בסגנון iOS, וסגנון עיגול מלא (בדומה לכפתור רדיו). לחצו על תיבת הסימון בתצוגה המקדימה כדי לראות את מצב הסימון, התאימו את הגודל וצבע ההדגשה, ולאחר מכן העתיקו את קוד ה-CSS.

מקור: Selectors Level 4, W3C — המפרט שמגדיר את מחלקת ה-:checked הפסאודו-שעליה מבוססת טכניקה זו.

למה להשתמש בו?

• תצוגה מקדימה חיה וניתנת ללחיצה — הפעילו וכבו את התיבה כדי לראות בדיוק איך נראים מצב הסימון ומצב אי-הסימון.
• שלושה סגנונות נפרדים ונפוצים בכלי אחד: תיבה עם סימן וי, מתג הפעלה/כיבוי, ועיגול מלא.
• האלמנט הבסיסי נשאר <input type="checkbox"> אמיתי, כך שניווט במקלדת, שליחת טפסים וקוראי מסך ממשיכים לפעול כרגיל.
• גודל וצבע הדגשה הניתנים להתאמה, מוטמעים ישירות כערכים בקוד ה-CSS במקום להישאר כמשתנים שיש למלא.
• אין צורך בגופן אייקונים, קובץ SVG או תמונה — סימן הוי והידית מצוירים באמצעות גבולות CSS פשוטים ופסאודו-אלמנטים.
• חינמי, פועל בדפדפן שלכם, ללא הרשמה.

איך להשתמש

1. בחרו סגנון: סימן וי מעוגל, מתג הפעלה/כיבוי, או עיגול מלא.
2. גררו את מחוון הגודל כדי להגדיל או להקטין את תיבת הסימון.
3. בחרו צבע הדגשה — זה יהפוך לצבע הרקע והגבול במצב מסומן.
4. לחצו על תיבת הסימון בפאנל התצוגה המקדימה כדי לוודא ששני המצבים, מסומן ולא מסומן, נראים כראוי.
5. העתיקו את קוד ה-CSS שנוצר לגליון הסגנונות שלכם והשתמשו בו על כל <input type="checkbox"> העטוף באותו אופן כמו סימון התצוגה המקדימה.

דוגמה

קלט

Style: rounded checkmark · Size: 24px · Color: orange

פלט

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

קלט תיבת הסימון מוסתר חזותית; התיבה הנראית היא <span> אח המעוצב לפי מצב ה-:checked של הקלט, עם גבול קטן ומסובב שמצויר כסימן וי לאחר הסימון.

למה להסתיר את תיבת הסימון המקורית במקום להסיר אותה

מפתה לדלג על ה-<input> האמיתי ולבנות תיבת סימון כולה מ-<div> מעוצב עם מטפל לחיצה, אבל כך מאבדים בחינם תמיכה במקלדת, שליחת טפסים וסמנטיקה עבור קוראי מסך. התבנית שהכלי הזה יוצר שומרת על קלט תיבת הסימון האמיתי בקוד המבנה — רק מוסתר חזותית באמצעות opacity: 0 וממוקם מחדש — כך שהדפדפן עדיין מתייחס אליו כתיבת סימון אמיתית בכל היבט חשוב, בעוד אלמנט אח מטפל בעיצוב הנראה לעין.

שלושת הסגנונות במבט מהיר

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

התאמה לשאר ממשק המשתמש שלכם

צבע ההדגשה שנוצר משפיע רק על מצב הסימון — בחרו את הצבע של המותג או הכפתורים שלכם כך שהתיבה תרגיש עקבית עם שאר הדף. שלבו אותו עם אותו border-radius המשמש במקומות אחרים בממשק לקבלת מראה מלוכד יותר.

→ Border Radius Generator

שאלות נפוצות