עיצוב של פקדי טפסים

ביחידת הלימוד הזו תלמדו איך לעצב את פקדי הטופס ואיך להתאים את הסגנונות האחרים של האתרים.

רוצה לעזור למשתמשים לבחור אפשרות?

הרכיב <select>

סגנונות ברירת המחדל של רכיב <select> לא נראים נהדר והמראה לא עקבי בין הדפדפנים.

קודם נשנה את החיצים.

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

כדי להסיר את חיצי ברירת המחדל של רכיב <select>, משתמשים במאפיין ה-CSS appearance. כדי להציג את החץ שבחרתם, צריך להגדיר את החץ כ-background.

עליך גם לשנות את font-size ל-1rem לפחות (שברוב הדפדפנים יש ערך ברירת מחדל של 16 פיקסלים) לרכיב <select>. אם תעשו זאת, תוכלו למנוע את המרחק מהתצוגה של הדף ב-iOS Safari כשהמיקוד הוא על פקד הטופס.

כמובן, ניתן גם לשנות את צבעי הרכיב כך שיתאימו לצבעי המותג שלך. אחרי שמוסיפים עוד כמה סגנונות לריווח, :hover ו-:focus, המראה של הרכיב <select> תואם עכשיו בין דפדפנים.

אפשר לראות את זה בהדגמה הבאה של עיצוב של מבחר חברות בשנת 2019

מה לגבי הרכיב <option>? הרכיב <option> הוא רכיב שהוחלף שהייצוג שלו הוא מחוץ להיקף של שירות ה-CSS. נכון לעכשיו, לא ניתן לעצב את הרכיב <option>.

תיבות סימון ולחצני בחירה

המראה של <input type="checkbox"> ו-<input type="radio"> משתנה בין דפדפנים.

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

בעבר, מפתחים לא יכלו לעצב ישירות את הפקדים של <input type="checkbox"> ו-<input type="radio">. עכשיו אפשר לעצב תיבות סימון ולחצני בחירה באמצעות פסאודו רכיבים. אפשר גם להשתמש בשיטת ההחלפה הבאה כדי ליצור סגנונות מותאמים אישית לרכיבים האלה.

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

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

חשוב להשתמש ב-position: absolute בשילוב עם opacity: 0 במקום עם display: none או עם visibility: hidden כך שהפקדים יהיו מוסתרים רק מבחינה חזותית. כך אפשר לוודא שהם עדיין חשופים על ידי הדפדפן עץ הנגישות. הערה: ייתכן שיהיה צורך בעיצוב נוסף כדי להבטיח שהרכיבים החזותיים יהיו מוסתרים פקדי הטופס נשארים 'בראש הדף' של האלמנטים החלופיים שלהם. פעולה זו תעזור להבטיח שהעברת העכבר מעל כאשר קורא מסך מופעל, או כאשר משתמשים במכשירי מגע עם קוראי מסך מופעלים, הפקדים המוסתרים להיות גלויים אם משתמשים בגילוי באמצעות מגע, ואינדיקטור המיקוד הגלוי של קורא המסך יופיע בדרך כלל במיקום שבו נמצאים הפקדים. מוצגות במסך.

כדי להציג את תיבות הסימון המותאמות אישית ואת לחצני הבחירה, עומדות לרשותכם אפשרויות שונות. צריך להשתמש ברכיב המדומה ::before של CSS ובמאפיין background של שירות ה-CSS, או להשתמש בתמונות SVG מוטבעות.

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

יש הרבה אפשרויות ב-CSS להבטיח שתיבות הסימון ולחצני הבחירה יתאימו לסגנונות של המותג שלכם.

מידע נוסף על עיצוב של <input type="checkbox"> ושל <input type="radio"> וסגנונות מותאמים אישית של תיבות סימון.

איך להשתמש בצבעי האתר עבור פקדי טפסים

רוצה להוסיף את סגנונות האתר לפקדי טפסים באמצעות שורת קוד אחת? אפשר להשתמש בנכס ה-CSS accent-color כדי לעשות זאת.

checkbox {
  accent-color: orange;
}

בדיקת ההבנה

בחינת הידע שלכם לגבי עיצוב פקדי טפסים

משאבים

• צבע הדגשה
• עיצוב הרכיב <select>
• הנגישות של פקדי טפסים מעוצבים
• לפתיחת ממשק המשתמש