במודול הזה תלמדו איך לעצב פקדי טפסים ואיך להתאים את הסגנונות האחרים של האתר.
איך לעזור למשתמשים לבחור אפשרות
הרכיב <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>.
פעולה זו תמנע שינוי מרחק התצוגה בדף ב-Safari של iOS כאשר מתמקדים בפקד הטופס.
אתם יכולים, כמובן, גם לשנות את צבעי האלמנטים כך שיתאימו לצבעי המותג שלכם.
אחרי שהוספתם עוד סגנונות לרווחים, :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 ובמאפיין ה-CSS background, או משתמשים בתמונות 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;
}
בחינת ההבנה
בחינת הידע שלך בעיצוב פקדי טפסים
איך אפשר להסיר עיצוב מותאם לפלטפורמה של פקדי טפסים?
revert: all;.appearance: none;.appearance: revert;.revert: appearance;.