ברוכים הבאים ל-LEMON!

קהילת LEMON הוקמה במטרה לשתף קטעי קוד (CSS, JS, PHP) ומדריכים שימושיים בין בוני אתרים באלמנטור.
באתר תוכלו למצוא מגוון קטעי קוד שונים שתוכלו לשלב באתרים שלכם. בנוסף, יעלו לאתר מדריכים מתקדמים בנושא אלמנטור, כלים ותוספים שקשורים לאלמנטור, ועוד מגוון מדריכים בנושא בניית אתרים.

הרשמו לניוזלטר

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

קבוצת LEMON בפייסבוק

אתם מוזמנים להצטרף!

עיצוב שאלון באלמנטור (שדות select / checkbox)

בפוסט הזה אנחנו בעצם נעצב את התצוגה של שדות מסוג ״אפשרויות בחירה״ (SELECT) ו-״תיבות סימון״ (CHECKBOX) באמצעות CSS.

העיצוב הזה מתאים במיוחד אם אתם רוצים לעשות שאלון באתר שלכם בשילוב האפשרות של אלמנטור לטפסים עם מספר שלבים. (כמו שאפשר לראות בגיף למעלה).

לסרטון הסבר של אלמנטור על טופס רב שלבי לחצו כאן

קוד CSS לעיצוב select / checkbox בטופס אלמנטור

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 {
    border: 1px solid #fff;
    border-radius: 100px;
    background-color: #fff;
    display: block;
    padding: 18px 60px;
    margin: 7px 0;
    font-size: 18px;
    transition: 0.2s all;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

selector .elementor-field-option label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' 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: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}

selector input:checked ~ label {
  color: #fff !important;
  background-color: #3CB54A;
}

selector input:checked ~ label:after {
  background-color: #2d9e3a;
  border-color: #fff;
}
Code language: CSS (css)

אז ככה זה נראה לפני הקוד

קצת משעמם… תודו 😉

וככה זה נראה עם הקוד

העתקת קישור

מוזמנים לשאול בפייסבוק!

5 תגובות

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

  2. מדהים
    יש לך אולי קוד שימרכז את האפשרויות בחירה
    כרגע זה מוצמד לימין

כתיבת תגובה

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

לשאלות / בקשות / בעיות / כל דבר אחר… צרו איתנו קשר :)

אודות כותב/ת הפוסט
logo
נעים מאוד, אני כפיר בקיש. חולה דיגיטל, מייסד האתר LMN.co.il, פרילנסר בתחום העיצוב גרפי ובניית אתרים. בשנים האחרונות מתמקד בעיצוב ופיתוח אתרים מבוססי וורדפרס ואלמנטור, בדגש על אתרי תדמית מעניינים, דפי נחיתה, בלוגים ועוד. מאמין שהרצון ללמוד דברים חדשים ולהתפתח הוא הכרחי, במיוחד בתחום הדיגטל, ותמיד סקרן ללמוד ולשתף ידע. בין היתר מתעניין גם בעריכת וידיאו, אפטר אפקטס, תלת מימד, צילום ועוד ועוד…
הרשמו לניוזלטר

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