Html select style background color

How to Style a Box Drop-Down with Only CSS?

It has been hard for a long time to style the element across all browsers.

A reasonable set of styles, as it turns out, can create a consistent and attractive selection box across new browsers while remaining just fine in older ones as well.

There are several elements of a select box that can be styled, particularly the height, width, font, border, color, padding, box-shadow and background color.

Example of styling a select box:

html> html> head> title>Title of the document title> style> .box < width: 120px; height: 30px; border: 1px solid #999; font-size: 18px; color: #1c87c9; background-color: #eee; border-radius: 5px; box-shadow: 4px 4px #ccc; > style> head> body> p>An ordinary select box: p> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> p>A styled select box: p> select class="box"> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> body> html>

Result

However, the annoying drop-down arrow continually stays the same. There is no direct way to style it, but there are some tricks that can be used to change the default drop-down arrow. Let’s discuss some methods below.

Use appearance: none;

To hide the default arrow of the dropdown, set the CSS appearance property to its «none» value, then add your individual arrow with the help of the background shorthand property.

Note that the appearance property is still considered to be an experimental technology and you need to use -moz- (for Firefox) and -webkit- (for Chrome, Safari, Opera) prefixes for maximum browser compatibility.

Example of adding an individual arrow by using the appearance property:

html> html> head> title>Title of the document title> style> select < width: 140px; height: 35px; padding: 5px 35px 5px 5px; font-size: 18px; border: 2px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 15% no-repeat #eee; > style> head> body> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> body> html>

Use overflow: hidden;

Note that the disadvantage of this method is that the options are visually more extended than the select menu.

Example of adding an individual arrow by using the overflow property:

html> html> head> title>Title of the document title> style> .mystyle select < background: transparent; width: 140px; height: 35px; border: 1px solid #ccc; font-size: 18px; > .mystyle < width: 120px; height: 34px; border: 1px solid #111; border-radius: 3px; overflow: hidden; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 20% no-repeat #ddd; > style> head> body> div class="mystyle"> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> div> body> html>

Use pointer-events: none;

The CSS pointer-events property can be used to create individual drop-downs, by overlaying an element over the native drop-down arrow (to create the custom one) and disallowing pointer-events on it.

Example of creating an individual drop-down by using the pointer-events property:

html> html> head> title>Title of the document title> style> .mybox < position: relative; display: inline-block; > select < display: inline-block; height: 30px; width: 150px; outline: none; color: #74646e; border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 2px #999; background: #eee; > /* Select arrow styling */ .mybox .myarrow < width: 23px; height: 28px; position: absolute; display: inline-block; top: 1px; right: 3px; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee; pointer-events: none; > style> head> body> div class="mybox"> span class="myarrow"> span> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> div> body> html>

Use punctuation marks instead of the drop-down arrow

It is quite pretty to use your preferred marks instead of the annoying drop-down sign of the box.

Set the marks in the content property and set the corresponding font to look good. Here, we set «Consolas» and «monospace». Then, you need to rotate the punctuation marks using the CSS transform property.

Example of using a punctuation mark instead of the drop-down arrow:

html> html> head> title>Title of the document title> style> select < width: 140px; height: 35px; padding: 4px; border-radius: 4px; box-shadow: 2px 2px 8px #999; background: #eee; border: none; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; > label < position: relative; > label:after < content: '<>'; font: 11px "Consolas", monospace; color: #666; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); right: 8px; top: 2px; padding: 0 0 2px; border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; > label:before < content: ''; right: 6px; top: 0px; width: 20px; height: 20px; background: #eee; position: absolute; pointer-events: none; display: block; > style> head> body> label> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> label> body> html>

Источник

Пользовательские стили элементов select на CSS

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

Несколько свойств и методов, которые будет использовать наше решение:

clip-path для создания настраиваемой стрелки раскрывающегося списка

макет сетки CSS для выравнивания пользовательского поля выбора и стрелки

пользовательские переменные CSS для гибкого стиля

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

единицы em для относительных размеров

Распространенные проблемы с нативным select

Как и для всех типов полей формы, у select первоначальный вид в разных браузерах различается. Слева направо, вот исходный вид select в Firefox, Chrome и Safari:

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

Примечание. Раскрывающийся список по-прежнему не стилизован, поэтому после select он все равно подберет для этого варианта список стилей отдельных браузеров . Это нормально — мы можем справиться с этим, чтобы сохранить доступность нативного select!

Базовый HTML

Для начала мы сосредоточимся на одиночном select.

Метка не является частью нашего упражнения, но включена в общем требовании, в частности, с атрибутом for, имеющим значение свойства id для select.

Чтобы реализовать наши пользовательские стили, мы для простоты в этом руководстве заключили пользовательский select в дополнительный div с классом select.

Сбросить и удалить унаследованные стили

Как и во всех моих руководствах в качестве передовой современной практики, мы сначала добавляем следующий сброс:

После этого мы можем начать правило для нативного select и применить следующее к его внешнему виду:

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

Примечание: CodePen настроен на использование автопрефикса, который добавит необходимые предварительно фиксированные версии свойства appearance. Возможно, вам придется специально настроить это для своего проекта или добавить их вручную. Мой HTML / Sass Jumpstart включает автопрефиксатор, как часть производственной сборки.

Хорошая новость в том, что мы можем добавить еще одно правило, чтобы убрать стрелку для более ранних версий IE, если вам это нужно:

Последняя часть — удалить значение по умолчанию outline. Не волнуйтесь — позже мы добавим ему замену для состояния :focus!

А вот гифка нашего прогресса. Вы можете видеть, что теперь нет визуальной индикации того, что это select до того, как кликнуть по нему:

Пользовательские стили поля выбора

Сначала давайте настроим некоторые переменные CSS. Это позволит гибко перекрашивать наш select, чтобы отображать состояние ошибки.

Примечание для специальных возможностей: как элемент пользовательского интерфейса выделенная граница должна иметь контраст 3:1 или выше по сравнению с цветом окружающего пространства.

Теперь пришло время создать стили select, которые мы применим к нашей оболочке div.select:

Сначала мы устанавливаем некоторые ограничения по ширине. Значения min-width и max-width в основном предназначены для этой демонстрации, и вы можете отказаться от них или изменить их для своего варианта использования.

Затем мы применяем некоторые свойства блочной модели, в том числе border, border-radius и padding. Обратите внимание на использование единицы em, которая будет сохранять эти свойства пропорциональными набору font-size.

В сбросе стилей, мы установили для нескольких свойств inherit, так что здесь мы определяем их, в том числе font-size, cursor и line-height.

Наконец, мы предоставляем свойства фона, включая градиент для малейшего размера. Если вы удалите свойства фона, выделение станет прозрачным и сохранит фон страницы. Это может быть желательно, однако помните о влияние на контраст и проверяйте его. И вот наш прогресс:

Пользовательская стрелка раскрывающегося списка выбора

Для нашей стрелки раскрывающегося списка, мы будем использовать одно из самых интересных современных свойств CSS: clip-path.

Обрезка контуров позволяет нам создавать всевозможные формы, «обрезая» квадратные и прямоугольные фигуры, которые мы получаем по умолчанию от большинства элементов. Я получил удовольствие от использования clip-path при моем недавнем редизайне сайта-портфолио.

До получения лучшей поддержки clip-path альтернативные методы включали:

background-image — обычно в формате PNG, более современным будет SVG

встроенный SVG как дополнительный элемент

трюк границы, чтобы создать треугольник

SVG может показаться оптимальным решением, однако при использовании в background-image в качестве иконки он теряет способность действовать как иконка в том смысле, что не может изменять свои свойства, такие как цвет заливки, без его полного переопределения. Это означает, что мы не можем использовать переменную CSS.

Размещение встроенного SVG-файла решает проблему с цветом, однако это означает добавление еще одного элемента каждый раз, когда определяется select.

С помощью clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая выглядит как SVG, но с преимуществами возможности использовать пользовательскую переменную и определения через стили вместо разметки HTML. Чтобы создать стрелку, мы определим ее как псевдо-элемент ::after.

Источник