דף זה תורגם על ידי Cloud Translation API.

עכשיו אפשר להתאים אישית את הרכיב <select> באמצעות CSS
קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

Adam Argyle

תאריך פרסום: 24 במרץ 2025

החל מגרסה 135 של Chrome, מפתחי אתרים ומעצבים יכולים סוף סוף להשתמש ברכיב <select> נגיש, סטנדרטי וניתן לעיצוב ב-CSS באינטרנט. התהליך הזה נמשך שנים רבות, עם שעות רבות של עבודה מהנדסית ועיצוב שיתופי של המפרט. התוצאה היא רכיב עשיר וחזק במיוחד שלא יתקלקל בדפדפנים ישנים יותר.

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

הדגמות של Una,‏ Brecht ו-Adam.

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

יש גם מסמכי עזרה חדשים ב-MDN בנושא תיבות select בהתאמה אישית, עם המון פרטים.

פגישה עם `appearance: base-select`

נכס CSS חדש appearance: base-select שמציב את הרכיב <select> במצב חדש שניתן להגדרה ולעיצוב, שנקרא בדרך כלל 'סגנון בסיס':

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

השימוש ב-base-select פותח מספר תכונות והתנהגויות חדשות:

שינוי המערכת לניתוח HTML בדפדפנים עבור התוכן בתוך <select>.
שינוי הרכיבים הפנימיים שעבר עיבוד של ה-<select>.
חשיפת חלקים פנימיים ומצבים חדשים של <select>.
עיצוב מינימלי חדש, עם אופטימיזציה להתאמה אישית.
האפשרויות שמוצגות נמצאות בשכבה העליונה, כמו חלון קופץ.
האפשרויות המוצגות ממוקמות באמצעות anchor().

כשמשתמשים ב-base-select לא ניתן להשתמש במספר תכונות והתנהגויות:

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

עכשיו אפשר לכלול ב-`<select>` תוכן HTML עשיר

לפני שאפשר היה להתאים אישית את <select>, אם הוספת אלמנט <option> עם תמונה או קובץ SVG, הדפדפן היה מתעלם מהם.

בדוגמה הבאה, הדפדפן יקרא את ה-HTML כפי שיצרתם אותו:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

עם זאת, ה-DOM שנעשה בו שימוש לא יכלול את <svg>:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

כאן מוצגים (משמאל לימין) Chrome,‏ Safari ו-Firefox שרנדרים את ה-HTML הקודם. אם הדפדפן תומך ב-appearance: base-select, קובץ ה-SVG יופיע באפשרות הזו, אחרת הוא לא יופיע.

הדמיה של בחירת SVG ב-Chrome, ‏ Safari ו-Firefox. ב-Chrome התמונות מוצגות, וב-Safari וב-Firefox הן מוצגות כאילו לא היו תמונות. — אפשר לנסות את הקוד הזה ב-Codepen.

יש סיכון לשבירה של אתרים קיימים עם אפשרות לבחירה בהתאמה אישית, בגלל השינויים בניתוח. ב-Chrome יש את התכונות שמאחורי ניסוי Finch למקרה שיהיה צורך להפסיק אותו באופן דחוף. אם הכול יתנהל כשורה, הניסוי יסתיים והקוד יישלח לתמיד למקור.

אפשר להתאים אישית לחלוטין

אפשר להחליף, להתאים אישית ולהוסיף אנימציה לכל חלק של base-select. הנה הדגמה שבה נעשה שימוש בכל התכונות החדשות כדי ליצור חוויות נבחרות מוכרות ומשמעותיות.

מוצגות ארבע הצגות שונות של רכיב שנבחר. בראשון מופיעה נקודה ירוקה של חיווי סטטוס עם התווית 'מופעל'. בתמונה הבאה מוצגות דמויות לצד האפשרויות. השלישי הוא בורר מרחב צבעים עם תווית בהתאמה אישית שמובנית בבורר. האפשרות האחרונה מאפשרת לבחור בין סטטוסים של טיוטה או פרסום. — אפשר לנסות את הקוד הזה ב-Codepen.

דוגמאות נוספות זמינות בקטע המשאבים שבסוף הפוסט הזה.

ממשקי JavaScript ללא שינוי

אין סיכונים לאינטראקציות הקיימות של JavaScript עם אלמנט <select>.

עם זאת, אם תתחילו להוסיף HTML עשיר לרכיבי <option>, עליכם לבדוק את הערכים שנבחרו, כי הדפדפן עדיין מנתח תמונות ו-SVG ומתעלם מהם. עם זאת, הלוגיקה לקביעת מחרוזת התוכן שנבחרה השתנתה, וייתכן שתצטרכו לבצע התאמות בהתאם לאפשרויות שזמינות לכם.

אם אתם משתמשים במאפיין value ב-<option>, אין לכם מה לדאוג.

משאבים

Chrome הוא הדפדפן הראשון שמטמיע את base-select, אבל כל הדפדפנים השתתפו במפרטים, ויש עוד רכיבים 'בסיסיים' שעדיין לא הושלמו. זו רק ההתחלה.

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

תודה מיוחדת לכל מי שהיה מעורב בהצלחת האירוע!