עיצוב מותאם אישית של Branded Select

ה-API של רכיבי select שניתנים להתאמה אישית מאפשר לעצב רכיבי <select> באופן הצהרתי, באמצעות CSS, כך שיתאימו באופן מושלם למערכת העיצוב של המותג. כשמפעילים את appearance: base-select, מקבלים גישה ל-shadow DOM הפנימי של רכיב הבחירה, וכך אפשר לעצב את הכפתור, את רשימת בורר האפשרויות, את סמל החץ ואת סימן הווי באמצעות מאפייני CSS רגילים.

בעבר, כדי ליצור רכיב select ממותג לחלוטין, היה צריך לבנות מחדש את הרכיב מאפס באמצעות JavaScript. לעיתים קרובות, הפעולה הזו פגעה בנגישות, בניווט באמצעות המקלדת ובשילוב של הטופס המקורי. בעזרת appearance: base-select, אתם מקבלים מראה מותאם אישית בזמן שהדפדפן מטפל בניהול המיקוד, ברינדור של השכבה העליונה ובקישורי הנגישות.

איך להטמיע

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

1. הבעת הסכמה להתאמה אישית: מחילים את appearance: base-select גם על הרכיב <select> וגם על הרכיב המדומה ::picker(select) (שמטרגט את הרשימה הנפתחת של האפשרויות).
2. מבנה הכפתור בהתאמה אישית (אופציונלי): מגדירים רכיב <button> ישירות בתוך <select> כדי להחליף את הטריגר שמוגדר כברירת מחדל. משתמשים ברכיב <selectedcontent> בתוך הכפתור הזה כדי לייצג את הטקסט או התוכן של האפשרות שנבחרה כרגע.
3. עיצוב רשימת הבחירה: משתמשים ברכיב המדומה ::picker(select) כדי להחיל טיפוגרפיה, צבעי רקע, גבולות וצללים על הרשימה הנפתחת. הדפדפן מעבד את זה בשכבה העליונה, כך שבעיות שקשורות ל-z-index הן נחלת העבר.
4. סמלים פנימיים של סגנון:
   • אפשר להשתמש ב-select::picker-icon כדי לעצב או להחליף את סמל החץ.
   • משתמשים ב-option::checkmark כדי לעצב את סימן הווי לצד האפשרות הפעילה.
5. אפשרויות סגנון: אפשר להחיל סגנונות על רכיבי <option> למצבי ריחוף, מרווח פנימי ופריסה.

קוד לדוגמה: Branded Courier Select

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

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

הטמעה אסטרטגית ושיטות מומלצות

• מומלץ להשתמש ב-appearance: base-select כשמערכת העיצוב דורשת עקביות חזותית ברמת דיוק גבוהה בכל פקדי הטפסים, שלא ניתן להשיג באמצעות שינויים סטנדרטיים בבחירה בדפדפנים שונים.
• אל תשתמשו באפשרות הזו אם אתם מסתמכים על חוויית הבחירה המקורית של מערכת ההפעלה (למשל, בורר גלגל הגלילה הרגיל במכשירי iOS). הפעלת base-select מבטלת את ההסכמה לרכיבים אינטראקטיביים מקוריים בממשק המשתמש לנייד לטובת תפריטים בשכבה העליונה שעברו עיבוד באינטרנט.
• חשוב לוודא שניגודיות הצבעים עומדת בתקני WCAG. הבורר שניתן להתאמה אישית מאפשר לכם להגדיר צבעים אד-הוק, אבל אתם אחראים לוודא שהטקסט נשאר קריא על רקעים מותאמים אישית.
• בודקים את ההתנהגות של הפריסה. ההגדרה appearance: base-select מסירה את התנהגות ברירת המחדל של הדפדפן, שבה גודל הבחירה נקבע לפי רוחב האפשרות הארוכה ביותר. יכול להיות שתצטרכו להגדיר רוחב קבוע או להשתמש באילוצים של flex/grid כדי למנוע שינויי פריסה.
• מוודאים של-<select> יש מאפיין name ו-<label> משויך. כך אפשר לוודא שגם עם ממשק משתמש מותאם אישית, הרכיב נשאר נגיש לקוראי מסך ופועל בצורה תקינה עם שליחת טפסים רגילים.
• כדי לוודא ששליחת הטופס פועלת בדיוק כמו קודם, צריך להשתמש במאפייני value רגילים באפשרויות.

אסטרטגיות חלופיות

חלופות ותמיכה בדפדפנים ל-<select> שניתן להתאמה אישית

בדפדפנים שעדיין לא תומכים ב-appearance: base-select, הרכיב <select> משתנה בצורה חלקה לתפריט נפתח רגיל של מערכת ההפעלה.

• התעלמות מתוכן שאינו טקסט: דפדפנים ישנים יותר מסירים תגי HTML (כמו <svg> או <div>) בתוך תגי <option> ומציגים רק את צומתי הטקסט. חשוב לוודא שתוכן הטקסט של ה-<option> קריא ובעל משמעות בפני עצמו.
• טיפול במבנה HTML: מנתחי HTML רגילים עשויים להתעלם מהתגים <button> ו-<selectedcontent> בתוך <select> או להתייחס אליהם כלא תקינים. אם אתם רואים טקסט רגיל כחלופה קריאה, אין צורך ב-polyfills כבדים של JavaScript לשיפור הדרגתי.

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});