עיצוב שדה צ'קבוקס בטופס אלמנטור

כדי לעצב את שדה הצ'קבוקס בטפסי אלמנטור כדי שיתאים לצבעים ולנראות האתר ושלא יהיה בצבע הכחול ברירת מחדל פשוט נעתיק את הקוד הבא תחת מתקדם ב – CSS מותאם.

אם האתר בעברית זה הקוד:

CSS
selector [type="checkbox"]:checked,
selector [type="checkbox"]:not(:checked),
selector [type="radio"]:checked,
selector [type="radio"]:not(:checked){
	position: absolute;
	visibility: hidden;
}
selector .elementor-field-option label {
    
    display: block;
    padding: 0px 40px;
    margin: 6px 0;
    transition: 0.2s all;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
selector .elementor-field-option label:after {
  width: 24px;
  height: 24px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 1px 2px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
selector input:checked ~ label:after {
  background-color: #2F4B57;
  border-color: #fff;
  border: 2px solid #D1D7DC;
}

אם האתר באנגלית זה הקוד:

CSS
selector [type="checkbox"]:checked,
selector [type="checkbox"]:not(:checked),
selector [type="radio"]:checked,
selector [type="radio"]:not(:checked){
	position: absolute;
	visibility: hidden;
}
selector .elementor-field-option label {
    
    display: block;
    padding: 0px 40px;
    margin: 6px 0;
    transition: 0.2s all;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
selector .elementor-field-option label:after {
  width: 24px;
  height: 24px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 1px 2px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
selector input:checked ~ label:after {
  background-color: #2F4B57;
  border-color: #fff;
  border: 2px solid #D1D7DC;
}

לא עובד לכם? תרשמו לי בתגובות ואשתדל לעזור לכם, בהצלחה.

במידה וקוד ה – Css חל רק על אזור, עמודה או ווידג'ט ספציפי ניתן להטמיע תחת טאב מתקדם של אותו האזור העמודה או הווידג'ט בקוד מותאם.

במידה והקוד חל על כל העמוד ניתן להטמיע את הקוד תחת ההגדרות של העמוד בקוד מותאם.

במידה והקוד חל על כל האתר ניתן להטמיע בהגדרות אתר בקוד מותאם או לחלופין להטמיע את הקוד תחת הגדרות אלמנטור בניהול קודים.

הסתבכתם עם הקוד? צריכים התאמה אישית?
תוכלו להיעזר בנותני השירות המומלצים שיעזרו לכם בעבודה

wpcoder - מתכנת
אתרים
wpcoder – מתכנת
המתכנת הכי טוב

4 תגובות

  1. היי
    איך אפשר להשתמש בקוד לאתר באנגלית
    אני רוצה שהעיגול יהיה בשמאל
    מה צריך לשנות בשביל זה?

  2. היי, אני מנסה לשים את הקוד
    selector [type="checkbox"]:checked,
    selector [type="checkbox"]:not(:checked),
    selector [type="radio"]:checked,
    selector [type="radio"]:not(:checked){
    כל הסלקטורים בצבע אדום
    מה אני צריכה לכתוב שם?

כתיבת תגובה

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

אלמנטור
Css
קרדיט: ישראל פאר
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
אלמנטור
Js
סגירת פופאפ בלחיצה על כפתור
וורדפרס
Css
עיצוב תוסף הנגישות של enable
ווקומרס
Php
הצגת מוצרים במלאי תחילה בארכיון מוצרים
אלמנטור
Css
הפיכת ווידג'ט תיבת אייקון או תיבת תמונה ללחיצים
אלמנטור
Css
תמונת רקע בתוך טקסט באלמנטור
חיפוש חופשי
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).