Элемент HTML Select: стилизация с использованием чистого CSS

1. Общий подход к оформлению элементов формы
2. Элемент select
3. Стрелка
4. Варианты стилей и настройки Firefox
5. Активное состояние Selctboxes
6. Internet Explorer
7. вывод

Здесь я опишу стилизацию элементов Select и Option с использованием чистого CSS - насколько это возможно на данный момент. SVG, переключатели браузера и условные комментарии используются для максимальной совместимости. Вот первый законченный пример, включающий код для просмотра:

Общий подход к оформлению элементов формы

Стиль элементов формы - в основном старая шляпа. Есть два основных направления - стилизация с помощью CSS оригинальных элементов формы или реплика с помощью Javascript. С тех пор, как появились мобильные устройства, реплика оказалась относительно сложной. Некоторые мобильные операционные системы имеют свои собственные компоненты, такие как Wheel в iOS или модальное диалоговое окно в Android для опций элемента Select.
Это увеличивает удобство использования, чтобы обойтись без собственных творений - потому что разнообразие устройств может решить, что лучше для себя. И эти решения останутся стабильными со временем.

При оформлении элементов формы следует обращать внимание на дизайн, следующий за функцией, а не чрезмерно стимулирующий пользователей. Jonas Hellwig очень хорошо описан для ввода текста, переключателей и флажков здесь: https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/ ,

Элемент select

Элемент Select все еще нуждается в некотором расширении.

Сначала мы скрываем элементы браузера по умолчанию:
Чтобы скрыть браузер стрелка поставляется с Браузер Prefix для использования:

-возможность появления: нет; внешний вид: нет; внешний вид: нет;

Префикс -webkit также применяется к MS Edge и Opera.

И поэтому мы скрываем стрелку для IE 10. Мы рассмотрим старые IE позже.

select :: - ms-expand {display: none; }

С атрибутами width, border, border-radius, font-size и color изменчивость является прямой, как и ожидалось.

Стрелка

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

данные: изображения / SVG + XML; кодировка = US-ASCII,% 3Csvg% 20xmlns% 3D% 22http% 3A% 2F% 2Fwww.w3.org% 2F2000% 2Fsvg% 22% 3D% 20viewBox% 220% 200% 20276,7% 20153 % 22% 20enable-фон% 3D% 22new% 200% 200% 20276,7% 20153% 22% 3E% 3Cstyle% 3E.arrow% 7Bfill% 3A% 23777777% 3B% 7D% 3C% 2Fstyle% 3E% 3Cpath% 20class% 3D % 22arrow% 22% 20d% 3D% 22M276.7% 200H0l138.2% 20153z% 22% 20% 2F% 3E% 3C% 3E% 2Fsvg

Цвет, который вы можете легко настроить: просто замените 777777 на нужный вам цвет в шестнадцатеричной записи.

С фоновой позицией: справа 10px по центру; повторение фона: без повтора; размер фона: авто 20%; Вы контролируете положение стрелки. Достаточно места создает ее отступы: 10px 30px 10px 10px;

Варианты стилей и настройки Firefox

Меню параметров, поэтому на представление точек выбора нельзя повлиять во всех браузерах Webkit. Всегда есть браузер по умолчанию. Firefox, однако, может это сделать.
@ -moz-document url-prefix () {...}
Я встроил информацию прямо в этот переключатель браузера, так что он вступает в игру только там, где мы можем влиять.

Webkit и Mozilla по-разному интерпретируют CSS. С помощью Webkit только заполнение интерпретируется элементом Select. Mozilla, с другой стороны, добавляет заполнение элемента option сверху и снизу, что вызывает нежелательные эффекты.
Поэтому я сбрасываю Padding для Select и добавляю его в Option.

@ -moz-document url-prefix () {select {padding: 0 30px 0 10px; } option {padding: 10px; цвет фона: # 555; цвет: #FFF; border-top: 1px solid # 777; }}

Оформление фона Option снова очень ожидаемо. Это установило цвет фона для: active или: hover is not. Здесь нам снова нужен хак: с цветным фоновым изображением, которое работает. Так как я также предпочитаю все в CSS, используется закодированное в Base64 изображение 1 × 1 пикселя. Очень приятно сгенерировать это: https://png-pixel.com/

@ -Moz-документ URL-префикс () {вариант: проверено, опция: парить {фон: #cccccc повтор URL (данные: изображение / JPEG; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM88x8AAp0BzdNtlUkAAAAASUVORK5CYII =); }}

Активное состояние Selctboxes

Чтобы избавиться от маркеров вокруг выделенного поля, обведите: нет; быть использованы. Имеет ли это смысл, остается вопросом здесь, но агентства часто хотят этого. Firefox также имеет пунктирную линию внутри поля Select. Это то, что вы удаляете (почему, по логике, оно мне не открывается)

выберите: -moz-focusring {цвет: прозрачный; тень текста: 0 0 0 # 000; }

Internet Explorer

MS Edge участвует в конфигурируемости и ведет себя аналогично браузерам Webkit. Ниже IE 10 не выцветает, поэтому у нас нет выбора и возьмем туда элемент по умолчанию. Так как мы должны спрятать за это нашу собственную стрелу, я возьму ее с собой Условные комментарии класс, который появляется только для IE менее 10. Это может быть где угодно над формой и должно быть снова закрыто под формой.

<! - [if lt IE 10]> <div class = "lt-ie10"> <! [ENDIF] -> / * скрыть стрелку SVG для IE старше IE10 * / .lt-ie10 select {background- изображение: нет; } <! - [if lt IE 10]> </ div> <! [ENDIF] ->

И наконец: IE 10 и IE 11 не могут делать SVG в фоновом режиме. Но есть еще .png - опять же Base64 в кодировке. Для этого я использую этот инструмент: https://www.base64-image.de/ ,

вывод

Это невероятное количество кода для небольшого селектбокса. Это не приятно Скорее, поддавайтесь потоку стандартного элемента и погрузитесь в него Дао веб-дизайна , И если этого нельзя избежать, у вас есть помощь здесь. Пример и полный код можно найти выше в колоде CSS. За предложения и критику я всегда благодарен.

макрос

Похожие