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

Una Kravets

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

Попробуйте и оставьте нам свой отзыв

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

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

Примечание. В рамках этого первого раунда отзывов мы понимаем, что реализация специальных возможностей в Chrome Canary еще не завершена (хотя первоначальная реализация уже доступна, чтобы вы могли ее опробовать). Команда, в которую входят авторы, разработчики браузеров и эксперты по вспомогательным технологиям, усердно работает над обеспечением максимальной доступности действительных авторских шаблонов. Мы хотели бы услышать ваши отзывы о первоначальной реализации.

Давайте углубимся в возможности настраиваемого API выбора, который основан на существующем теге выбора HTML.

Согласие на новый <select>

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

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

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

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

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

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

Демонстрация базового выбора в сравнении с настраиваемым выбором.

Примечание. Атрибуты multiple и size при выборе ( <select multiple> и <select size=n> ) appearance: base-select пока.

Разрушение частей

Диаграмма, показывающая части выбора.

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

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

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

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

Примечание. Мы хотели бы услышать ваши отзывы о том, как вы можете получить доступ и стилизовать часть выбора с галочкой.

Хотя внутри вашего выбора может быть неограниченное количество элементов, браузер помещает все, что находится за пределами элемента <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> использует функции всплывающего окна и позиционирования привязки . Он построен с использованием этих двух базовых технологий. Это означает, что раскрывающийся список опций внутри выбора действует как всплывающее окно, привязанное к кнопке-триггеру, открывающей выбор.

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

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

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

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

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

Базовый стиль

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

Изменение стилей различных частей выделения с помощью кнопки по умолчанию.

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

<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> .
• Разделенные кнопки в настоящее время находятся на стадии экспериментирования, поскольку мы разрабатываем доступное решение.

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

Заключение

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

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

Благодарим вас за то, что вы помогли нам сделать это правильно и упростить создание доступных, настраиваемых элементов управления формами в Интернете!