עיצוב שאלון באלמנטור (שדות 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)

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

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

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