Стилизация Select

html5-css3

Элемент select долгое время трудно было стилизовать в разных браузерах. Чтобы избежать его недостатков, в прошлом, мы использовали обходные пути, такие как: стилизация родительского элемента, добавление псевдоэлементов и даже использование JavaScript для создания подобного управления элемента. Но обходные пути сложно поддерживать и использовать, не говоря уже о проблемах доступности, которые создают пользовательские элементы.

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

Быстрый пример

Во-первых, для примера, это элемент select без стиля. Он будет выглядеть немного иначе, в зависимости от браузера, который вы используете.

Ниже представлен тот же самый элемент select, стилизованный непосредственно на CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, необходимого для IE10 +):

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

Код

HTML-код для select выше показан ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.

И вот CSS, управляющий внешним видом select, который вы также можете найти в нашем репозитории select-css. Я добавлю некоторые заметки об определенных частях сразу после кода.

Примечания по CSS

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

  • Select по умолчанию установлен на display: block, но вы можете настроить его display: inline-block; width: auto; если вы хотите, чтобы он стал рядом с label.
  • Фон для select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — линейный градиент. Если вы измените изображение значка, имейте в виду, что его размер установлен в первом разделе background-size: .65em auto, 100%; свойства. И его позиция устанавливается через background-position: right .7em top 50%, 0 0; (то есть .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать большим правый отступ для кнопки, чтобы она не перекрывала текст выделенного элемента, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится, а стрелка в браузерах по умолчанию будет отображаться с отступом слева, поэтому не задавайте слишком большое значение, иначе стрелка в IE9 будет вставлена очень далеко.
  • font-size: 16px; это правило важно, потому что Safari будет увеличивать макет сайта, если текст выделения меньше 16px. Как правило, такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей в select’s.

Источник статьи: Ссылка

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *