Элемент HTML Select: стилизация с использованием чистого CSS
- Общий подход к оформлению элементов формы
- Элемент select
- Стрелка
- Варианты стилей и настройки Firefox
- Активное состояние Selctboxes
- Internet Explorer
- вывод
Здесь я опишу стилизацию элементов 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. За предложения и критику я всегда благодарен.
макрос
Похожие
Атрибут HTML: выравнивание[Start] • [HTML элементы] • [Атрибуты HTML] • [CSS стили] • [Онлайн совет] [А] [B] Fabryka Świec vel Polskie Świece использует второй подход.
Каждый заслуживает второго шанса. Я руководствуюсь этим принципом не только в отношении людей, но и в отношении брендов и продуктов. Я не хочу верить, что что-то или кто-то может быть довольно отстойным, потому что это, безусловно, имеет что-то ценное. К сожалению, после долгих попыток несколько товаров попали в категорию дрянной , Я познакомился с магазином ierwierznia Świec более года назад, когда у меня была любовь к ароматическим YouTube Red
... и конфиденциальности по умолчанию для пользователей старше 13 лет По умолчанию загружаемые видео могут просматривать все. Если вы загружаете видео, YouTube позволяет вам ограничить показ этого видео, сделав его приватным. Настройте параметры конфиденциальности Последовательная консоль - NVIDIA Jetson TX2 - JetsonHacks
... настройки Важной частью последовательной связи являются настройки, которые используются для связи между устройствами. Вместо того, чтобы подробно обсуждать каждый параметр и его значение, давайте разберем его в самих настройках. Сначала установите устройство, в видео устройство было ' / dev / ttyUSB0 '. Скорость соединения составляет 115200, с 8 битами без контроля четности и 1 стоп-битом (115200 8N1). Для этих трехпроводных кабелей настройки
... элемента документа. При добавлении нового элемента в документ значения функций автоматически транскрибируются из файла. Также можно вручную «вводить» значения дополнительных функций при добавлении элементов в документ. Для того, чтобы соответствующие значения функций были напечатаны в документе, изменения должны быть сделаны с помощью параметра Настройки , распечатка документа в конфигурации программы, в Настройки-> Документы-> Михал Суски: Оптимизация с использованием инструмента SurferSEO
Google все больше смешивается, когда дело доходит до факторов ранжирования. В течение долгого времени мы наблюдали, что отдельные факторы для различных отраслей могут иметь различный вес. То, что работает в одной отрасли, не обязательно означает увеличение в другой. Сегодня я представляю вам инструмент Surfer, который позволяет анализировать взаимосвязь между отдельными SEO-факторами на странице и позициями страниц для конкретных ключевых слов. о LEGO выставка
LEGO выставка Идеально подходит для холодных дней. Я знаю, что это необычный подход, но я люблю зиму. Снежная зима. Мне нравится ее необычное очарование и волшебство, которое сочетается с волшебством Рождества. Я не могу представить Рождество летом. Снег обязателен. Дети одеты в комбинезоны, строят снеговиков, иглу и делают ангелов, лежащих на спине. И папа посреди этого играет так же хорошо, как и они (и, возможно, даже лучше). Я думаю, однако, что двухнедельная Оптимизация сайта электронной коммерции - часть 2. Структура страницы
... ить структуру страницы? Есть несколько способов сделать это: Отобразите источник страницы и найдите соответствующие элементы. SEO аксессуары для браузеров WebDeveloper Панель инструментов SEO SEO Доктор И т.д. Инструменты аутентификации Мы будем использовать пример из нашего собственного двора. Познакомьтесь друг с другом BlackBerry 10: настройка электронной почты и календарей
... настройки электронной почты, календаря, адресных книг и учетных записей социальных сетей. Где настроить? Доступ к конфигурации почты и тому подобного можно получить, развернув главное меню на главном экране, выбрав « Настройки», ТЕСТ: Moto G5 - телефон Android 7 стоимостью менее 2000 долларов - DinSide
Прошлой осенью Мы утроили три протестированных телефона примерно до 2500 крон , Лучшим из трех был Moto G4 Plus, который также получил очень хорошие отзывы на международном уровне, и который многими считался одна из лучших покупок в прошлом году для людей с ограниченным бюджетом. В этом году Motorola выпускает Sony Xperia X Compact в тесте: достаточно для среднего класса
Sony представила Xperia X Compact, новый смартфон в своем компактном ассортименте для IFA 2016. Но у японцев, в отличие до сих пор, есть не маленький потомок флагманской серии с похожим хорошим оснащением, но урезанная модель. Сможет ли Sony Xperia X Compact убедить в своей производительности и управляемости, вы найдете в нашем подробном обзоре. В нашем тесте Sony Xperia Ить структуру страницы?
Где настроить?