Стилизация элементов управления форм, таких как элемент <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> по-прежнему будет отображать значимый контент на вашей странице. В следующем примере показан настраиваемый выбор в сравнении с тем, что увидит пользователь в неподдерживаемом браузере:
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;
}
Интерактивные варианты
Имея полный контроль над стилем ::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>. - Разделенные кнопки в настоящее время находятся на стадии экспериментирования, поскольку мы разрабатываем доступное решение.
Ожидается, что в будущем модель контента расширится и станет более гибкой, поскольку история доступности этого опыта будет конкретизирована.
Заключение
Мы рады видеть, как эта функция продвигается через рабочие группы и органы по стандартизации, и делимся своим прогрессом, пока мы активно создаем прототип и оцениваем форму этой функции. Если вы столкнулись с чем-то, что работает не так, как вы ожидаете, сообщите нам об этом!
И хотя эта функция все еще находится в разработке, мы будем рады услышать ваши отзывы через эту короткую форму обратной связи .
Благодарим вас за то, что вы помогли нам сделать это правильно и упростить создание доступных, настраиваемых элементов управления формами в Интернете!
,
Стилизация элементов управления форм, таких как элемент <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> по-прежнему будет отображать значимый контент на вашей странице. В следующем примере показан настраиваемый выбор в сравнении с тем, что увидит пользователь в неподдерживаемом браузере:
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;
}
Интерактивные варианты
Имея полный контроль над стилем ::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>. - Разделенные кнопки в настоящее время находятся на стадии экспериментирования, поскольку мы разрабатываем доступное решение.
Ожидается, что в будущем модель контента расширится и станет более гибкой, поскольку история доступности этого опыта будет конкретизирована.
Заключение
Мы рады видеть, как эта функция продвигается через рабочие группы и органы по стандартизации, и делимся своим прогрессом, пока мы активно создаем прототип и оцениваем форму этой функции. Если вы столкнулись с чем-то, что работает не так, как вы ожидаете, сообщите нам об этом!
И хотя эта функция все еще находится в разработке, мы будем рады услышать ваши отзывы через эту короткую форму обратной связи .
Благодарим вас за то, что вы помогли нам сделать это правильно и упростить создание доступных, настраиваемых элементов управления формами в Интернете!
,
Стилизация элементов управления форм, таких как элемент <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> по-прежнему будет отображать значимый контент на вашей странице. В следующем примере показан настраиваемый выбор в сравнении с тем, что увидит пользователь в неподдерживаемом браузере:
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;
}
Интерактивные варианты
Имея полный контроль над стилем ::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>. - Разделенные кнопки в настоящее время находятся на стадии экспериментирования, поскольку мы разрабатываем доступное решение.
Ожидается, что в будущем модель контента расширится и станет более гибкой, поскольку история доступности этого опыта будет конкретизирована.
Заключение
Мы рады видеть, как эта функция продвигается через рабочие группы и органы по стандартизации, и делимся своим прогрессом, пока мы активно создаем прототип и оцениваем форму этой функции. Если вы столкнулись с чем-то, что работает не так, как вы ожидаете, сообщите нам об этом!
И хотя эта функция все еще находится в разработке, мы будем рады услышать ваши отзывы через эту короткую форму обратной связи .
Благодарим вас за то, что вы помогли нам сделать это правильно и упростить создание доступных, настраиваемых элементов управления формами в Интернете!
,
Стилизация элементов управления форм, таких как элемент <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> по-прежнему будет отображать значимый контент на вашей странице. В следующем примере показан настраиваемый выбор в сравнении с тем, что увидит пользователь в неподдерживаемом браузере:
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;
}
Интерактивные варианты
Имея полный контроль над стилем ::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>. - Разделенные кнопки в настоящее время находятся на стадии экспериментирования, поскольку мы разрабатываем доступное решение.
Ожидается, что в будущем модель контента расширится и станет более гибкой, поскольку история доступности этого опыта будет конкретизирована.
Заключение
Мы рады видеть, как эта функция продвигается через рабочие группы и органы по стандартизации, и делимся своим прогрессом, пока мы активно создаем прототип и оцениваем форму этой функции. Если вы столкнулись с чем-то, что работает не так, как вы ожидаете, сообщите нам об этом!
И хотя эта функция все еще находится в разработке, мы будем рады услышать ваши отзывы через эту короткую форму обратной связи .
Благодарим вас за то, что вы помогли нам сделать это правильно и упростить создание доступных, настраиваемых элементов управления формами в Интернете!