עיצוב כפתורי רדיו וצ’קבוקס בטפסי אלמנטור

בטפסים של אלמנטור יש שני שדות דומים, אפשרויות בחירה (רדיו), ותיבות סימון (צ’קבוקס).

ההבדל ביניהם, אפשרויות בחירה – מאפשר בחירת אפשרות אחת בלבד, תיבות סימון – מאפשר יותר מבחירה אחת.

באלמנטור עצמו אין אפשרות לעצב את השדות האלו מעבר לגודל הפונט וכדו’.

שימו לב שניתן באלמנטור להגדיר “רשימה בתוך השורה”.

ככה נראה הברירת מחדל

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

				
					selector .elementor-field-group, selector .elementor-field-subgroup{
justify-content: center;
}

selector .elementor-field-subgroup span{
    margin-top: 15px;
}

selector input[type="radio"], selector input[type="checkbox"]{
  appearance: none;
}
selector .elementor-field-option label{
    background-color: white;
    padding: 10px 25px;
    font-size: 16px;
    color: black;
    border: solid 1px black;
    border-radius: 20px;
    cursor: pointer;
}
selector input:checked ~ label{
  color: white;
  background-color: black;
  border: solid 1px black;
}
				
			
וככה זה נראה

בשביל שהכפתורים יהיו ברוחב מלא, נבטל באלמנטור את ה- “רשימה בתוך השורה”, ונוסיף את הקוד הבא.

				
					selector .elementor-field-group, selector .elementor-field-subgroup  {
    justify-content: center;
}

selector .elementor-field-subgroup span{
    margin-top: 15px;
}


selector input[type="radio"], selector input[type="checkbox"]{
  appearance: none;
}
selector .elementor-field-option label {
    display: block;
    text-align: center;
    background-color: white;
    padding: 15px 25px;
    font-size: 16px;
    color: black;
    border: solid 1px black;
    border-radius: 20px;
    cursor: pointer;
}
selector input:checked ~ label {
  color: white;
  background-color: black;
  border: solid 1px black;
}
				
			
וככה זה נראה

2 תגובות

  1. תודה רבה!
    יש אפשרות להגדיר בתיבות סימון שחובה לבחור 2 אפשרויות כדי לשלוח את הטופס?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?