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

Una Kravets

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

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

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

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

Давайте углубимся в возможности настраиваемого 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:

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

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

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

Изменения могут быть такими же простыми, как визуальное оформление элемента выбора. Например, чтобы обновить стили кнопок, стили наведения и фокуса или фон выбранных параметров. После выбора с помощью 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;
}

Интерактивные варианты

Имея полный контроль над стилем ::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);
}

Ограничения и примечания о доступности

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

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

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

Заключение

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

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

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

Una Kravets

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

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

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

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

Давайте углубимся в возможности настраиваемого 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:

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

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

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

Изменения могут быть такими же простыми, как визуальное оформление элемента выбора. Например, чтобы обновить стили кнопок, стили наведения и фокуса или фон выбранных параметров. После выбора с помощью 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;
}

Интерактивные варианты

Имея полный контроль над стилем ::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);
}

Ограничения и примечания о доступности

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

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

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

Заключение

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

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

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

Una Kravets

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

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

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

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

Давайте углубимся в возможности настраиваемого 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:

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

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

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

Изменения могут быть такими же простыми, как визуальное оформление элемента выбора. Например, чтобы обновить стили кнопок, стили наведения и фокуса или фон выбранных параметров. После выбора с помощью 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;
}

Интерактивные варианты

Имея полный контроль над стилем ::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);
}

Ограничения и примечания о доступности

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

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

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

Заключение

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

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

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

Una Kravets

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

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

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

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

Давайте углубимся в возможности настраиваемого 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> .

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерактивные варианты

С полным управлением стилем ::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);
}

Ограничения и примечания о доступности

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

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

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

Заключение

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

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

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