Стилизация брендированных объектов

Настраиваемый API выбора предлагает декларативный способ оформления элементов <select> на основе CSS, который идеально соответствует системе проектирования вашего бренда. Включив appearance: base-select, вы получите доступ к внутренней теневой модели DOM элемента select. Это позволит вам настраивать стили кнопки, списка выбора вариантов, значка стрелки и индикатора галочки с помощью стандартных свойств 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> для состояний при наведении, полей и макета.

Пример кода: выбор брендированной курьерской службы

В примере ниже показан пользовательский элемент select, оформленный с использованием моноширинного шрифта и пунктирных границ, чтобы соответствовать эстетике бренда parcel.

/* 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, если в вашей системе проектирования требуется высокая точность и визуальная согласованность всех элементов управления формой, которую невозможно достичь с помощью стандартных переопределений select в разных браузерах.
• НЕ используйте этот атрибут, если вы полагаетесь на встроенный инструмент выбора операционной системы (например, стандартное колесо прокрутки на iOS-устройствах). Если вы включите base-select, то вместо элементов управления пользовательского интерфейса на мобильных устройствах будут использоваться меню верхнего уровня, отрисованные в браузере.
• Проверяйте, соответствует ли контрастность цветов стандартам WCAG. Вы можете выбрать любой цвет, но должны убедиться, что текст на таком фоне будет читаемым.
• Протестируйте поведение макета. Значение appearance: base-select отменяет стандартное поведение браузера, при котором размер элемента select определяется по ширине самого длинного варианта. Чтобы предотвратить смещение макета, может потребоваться задать фиксированную ширину или использовать ограничения flex/grid.
• Убедитесь, что у элемента <select> есть атрибут name и связанный с ним элемент <label>. Это гарантирует, что даже при наличии пользовательского интерфейса компонент останется доступным для программ чтения с экрана и будет корректно работать со стандартными отправками форм.
• Используйте стандартные атрибуты value для вариантов, чтобы отправка формы работала так же, как и раньше.

Резервные стратегии

Резервные объявления и поддержка браузеров для настраиваемых <select>

В браузерах, которые пока не поддерживают appearance: base-select, элемент <select> преобразуется в стандартный раскрывающийся список операционной системы.

• Игнорирование нетекстового контента. Старые браузеры удаляют HTML-теги (например, <svg> или <div>) внутри тегов <option> и отображают только текстовые узлы. Убедитесь, что текстовый контент элемента <option> понятен и имеет смысл сам по себе.
• Обработка структуры HTML. Стандартные синтаксические анализаторы могут игнорировать теги <button> и <selectedcontent> внутри <select> или считать их недопустимыми. Если вы рассматриваете стандартный текст как резервный вариант, то для прогрессивного улучшения не требуются тяжелые полифилы JavaScript.

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