Запрос на отзыв разработчика: настраиваемый выбор

Una Kravets

Стилизация элементов управления формами, таких как элемент <select>, уже много лет считается одной из главных проблем разработчиков, и мы работаем над ее решением. Это сложная задача, и на ее решение ушло много времени, но мы уже близки к цели. Настраиваемая версия элемента select официально находится на этапе 2 в WHATWG, к ней проявляется большой интерес со стороны разработчиков браузеров, а прототип для тестирования доступен в Chrome Canary 130.

Попробуйте и поделитесь своим мнением

Убедитесь, что у вас установлена версия 130 Chrome Canary и включен флаг экспериментальных функций веб-платформы. Чтобы включить этот параметр, введите chrome://flags в адресной строке и активируйте #experimental-web-platform-features. После этого вы сможете увидеть демонстрации Codepen в этом посте. Вы также можете посмотреть все примеры в коллекции Codepen.

Чтобы оставить отзыв о функции, заполните эту форму. Это займет всего три минуты.

Давайте рассмотрим функции настраиваемого API выбора, который основан на существующем HTML-теге выбора.

Как включить новую версию <select>

Чтобы включить новое поведение, используйте свойство CSS appearance как для кнопки выбора на странице, так и для средства выбора. Чтобы включить эту функцию, задайте appearance: base-select для элемента <select> и ::picker(select).

::picker(select) – это новый псевдоэлемент, предоставляемый агентом пользователя, который применяется только к элементам <select>, для которых включено новое поведение с помощью appearance: base-select. Этот псевдоэлемент выбора представляет собой всплывающее окно, которое запускается базовой кнопкой выбора. Вы можете включить оба варианта, как показано в следующем коде:

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

Вы можете включить только кнопку на странице, но не можете включить только всплывающее окно без кнопки. ::picker(select) создается только после того, как appearance: base-select применяется к <select>.

Теперь вы можете настроить элемент select. Новый настраиваемый элемент select поставляется с некоторыми стилями по умолчанию, которые выглядят одинаково в разных браузерах и операционных системах. Вот как выглядит стандартный настраиваемый элемент select по сравнению с существующим элементом select в Chrome на macOS:

Стиль агента пользователя по умолчанию для настраиваемого элемента select справа. Это может измениться, и мы будем рады вашим отзывам.
Демонстрация базового и настраиваемого элементов select.

Разбивка на части

Диаграмма, на которой показаны элементы меню выбора.

В новом настраиваемом режиме выбора вам доступны следующие элементы: - selectedoption – отражает внутренний HTML-код выбранного варианта. - option::before: содержит флажок, указывающий на выбранный в данный момент вариант в качестве доступности по умолчанию (может быть изменено). ::picker(select) – всплывающее окно, которое содержит весь контент за пределами button внутри настраиваемого элемента select.

Вы можете стилизовать любую часть элемента select. Например, вы можете добавить произвольный неинтерактивный контент в элементы <option>, а также настроить стиль кнопки на странице, которая открывает раскрывающийся список, и стиль самого списка (::picker(select)).

Вы также можете настроить стиль элемента button, добавить собственный индикатор со стрелкой и произвольный контент внутри и вокруг любого из элементов. Вы можете не только добавлять контент, но и скрывать любые из этих новых элементов и стилей по умолчанию. Например, если вы не хотите, чтобы в псевдоэлементе ::before варианта отображался флажок, используйте следующий код CSS:

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

Внутри select может быть неограниченное количество элементов, но браузер поместит все, что находится за пределами элемента <button>, в псевдоэлемент ::picker(select), который ведет себя как всплывающее окно, привязанное к кнопке. Этот <button> переключает ::picker(select). Варианты и другие элементы, находящиеся непосредственно внутри select, будут подняты в ::picker(select). Вы также можете использовать собственную оболочку для стилизации. Этот контейнер также будет размещен внутри псевдоэлемента ::picker(select).

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

Новый настраиваемый элемент <select> использует функции всплывающего окна и позиционирования привязки. Она основана на двух технологиях. Это означает, что раскрывающийся список параметров в элементе select действует как всплывающее окно, привязанное к кнопке триггера, которая открывает элемент select.

Вы можете использовать позиционирование привязки, чтобы настроить стиль этого всплывающего окна ::picker(select) (в том числе привязать его к другим элементам). Такая модель контента также означает, что стили анимации верхнего слоя работают со списком вариантов для анимации эффектов входа и выхода.

Улучшите существующий элемент <select>

Ранее команда Chrome работала над идеей элемента <selectlist>. В этой записи мы расскажем о том, как переработали эту функцию, чтобы использовать существующий элемент <select>.

Одно из основных преимуществ повторного использования существующего элемента <select> – возможность постепенно улучшать базовый элемент HTML. В отличие от нового элемента, повторно используемый элемент <select> по-прежнему будет показывать на странице значимый контент. В примере ниже показано, как выглядит настроенный элемент select и что увидит пользователь в неподдерживаемом браузере.

Весь текстовый контент в option отображается в резервной версии элемента select.

Базовые стили

Изменения могут быть простыми, например визуальное оформление выбранного элемента. Например, вы можете изменить стиль кнопок, стиль при наведении и фокусе или фон выбранных вариантов. После включения appearance: base-select примените любой CSS к нужным частям.

Изменение стилей различных частей элемента select с кнопкой по умолчанию.

Чтобы настроить индикатор со стрелкой, добавьте собственную кнопку и стрелку в элемент select.

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

Затем настройте стиль стрелки:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

Сложный контент в вариантах ответа

Вы можете добавлять и оформлять не только строки, но и другие элементы <option> внутри <select>. Простой пример – добавление изображений флагов рядом с названиями стран в раскрывающемся меню. Для этого добавьте элемент изображения рядом с текстом варианта.

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>
Меню выбора страны с флагами.

В более сложном примере могут быть фото профиля, имена и дополнительная информация, которая поможет вам выбрать нужный элемент в раскрывающемся списке.

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>
Скриншот меню выбора валюты.

Оформить выбранный вариант

Вы можете настроить, чтобы выбранный вариант отображался в выбранном состоянии иначе, чем в раскрывающемся списке. Пример – интерфейс Gmail, где для экономии места ярлык удаляется после выбора параметра. Для этого подключитесь к элементу <selectedoption>. Объект <option> содержит следующую разметку:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

Теперь примените display: none к .text внутри <selectedoption>, чтобы скрыть текст и оставить только значок:

selectedoption .text {
  display: none;
}
Выбор в стиле Gmail со значком, представляющим выбранный вариант.

Интерактивные функции

Полностью контролируя стили ::picker(select), создайте на основе предыдущей демонстрации интерактивный элемент, реагирующий на наведение курсора и фокус. В этой демонстрации новая функция calc-size() используется для анимации ширины средства выбора: от отображения значков до отображения полной ширины параметров при наведении курсора или если у выбранного элемента есть параметр с видимым фокусом.

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}
Интерактивный выбор в стиле Gmail с постепенно показываемым контентом при наведении курсора или фокусе.

Ограничения и специальные возможности

Большая сила – это большая ответственность. Чтобы функция была доступна всем, мы ввели некоторые ограничения.

  • Помимо элементов <option>, в элементе <select> пока не разрешены другие интерактивные элементы, на которых можно фокусироваться, например кнопки. Пока что предлагаемая модель контента позволяет использовать только элементы <div>, <span>, <option>, <optgroup>, <img>, <svg> и <hr>.
  • Разделенные кнопки в настоящее время находятся на стадии эксперимента, поскольку мы работаем над решением для специальных возможностей.

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

Заключение

Мы рады, что эта функция развивается благодаря рабочим группам и организациям по стандартизации. Мы будем делиться новостями по мере того, как будем создавать прототип и оценивать форму этой функции. Если вы столкнулись с проблемой, сообщите нам об этом.

Функция пока находится в разработке, и мы будем рады узнать ваше мнение о ней. Поделиться им можно через эту короткую форму обратной связи.

Спасибо, что помогаете нам сделать веб-формы более доступными и настраиваемыми!