<divelopers>: “Стилизуемый combobox и фильтруемый select Браузеры совместно с OpenUI…”

Стилизуемый combobox и фильтруемый select

Браузеры совместно с OpenUI продолжают развивать <select>, добавляя новые функции и возможности стилизации. В Сhrome уже можно стилизовать стандартный <select> с одиночным выбором, на подходе вариант с множественным выбором и combobox.

На конференции BlinkOn 21 контрибьютор движка Chromium поделился прогрессом в этом направлении. Я уже писал о том, как работают атрибуты size и multiple у стандартного <select> и планах по расширению их функциональности.

<select multiple size="1">
  <button>
    <selectedcontent>
      <div>One</div>
      <div>Two</div>
    </selectedcontent>
    <span>0 Selected</span>
  </button>
  <option selected>One</option>
  <option selected>Two</option>
  <!-- ... -->
</select>
<style>
  selectedcontent:not(:empty) + span {
    display: none;
  } 
</style>

Первое — обёртки <div> для проецируемых опций в <selectedcontent>. Этот элемент был внедрён как часть стилизуемого <select> для проецирования значения выбранной опции. Теперь проецируются несколько опций и они оборачиваются в <div> для стилизации.

Для состояния, когда не выбрана ни одна опция, а значит <selectedcontent> пуст, предлагается использовать резервный элемент <span> с текстом. Он скрывается через комбинацию псевдо-классов :not(), :empty и комбинатор +.

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

<button
  commandfor="dialog"
  command="showpopover"
>
  <selectedcontent id="sc">
  </selectedcontent>
</button>
<dialog popover id="dialog">
  <input filter="select">
  <select
    size="4"
    id="select"
    selectedcontentelement="sc"
  >
    <!-- опции -->
  </select>
  <!-- можно добавить другие элементы -->
</dialog>

Виджет собран из нескольких встроенных API. Кнопка с атрибутами command/commandfor управляет отображением диалога, который реализован с помощью <dialog popover>. Внутри <select>, который связан с <selectedcontent> для проекции выбранной опции.

<input> связан с <select> через новый атрибут filter, который позволяет фильтровать опции. Предложенный вариант многословен, но хорош тем, что в <dialog> можно поместить другие элементы (текст, кнопки, иконки) помимо <input> и <select>.

Прорабатывается вариант для простых случаев, когда есть только опции и поле для их фильтрации, без дополнительных элементов. В таком случае предлагается вкладывать <input> внутрь <select> перед опциями. Для этого будет доработан парсер.

<select>
  <input>
  <!-- опции -->
</select>

К фильтрации предусмотрено событие beforefilter, которое можно перехватить, отменить стандартное поведение через preventDefault(). Это механизм для реализации подгрузки данных из внешнего источника и динамической генерации списка опций.

Показана возможность стилизации уже существующей в браузерах связки <input> и <datalist>. Как и в случае со стилизуемым <select>, API базируется на идее базового внешнего вида и стандартных стилей, задаваемых свойством appearance: base;.

<input list="options">
<datalist id="options">
  <!-- опции -->
</datalist>
<style>
  input[list], datalist {
    appearance: base;
  }
</style>

Некоторые из показанных возможностей тестируются и уже доступны в Chrome за флагом экспериментальных технологий. Разработчики собирают обратную связь, обсуждают спорные моменты и дорабатывают API.

#html #css #ui