Слава Україні!

Оформление тега SELECT

Варианты стилизации стрелки тега SELECT html CSS
В современном дизайне очень часто возникает ситуация, когда выпадающий список `select` не вписывается в общий стиль страницы. В 99 случаях из 100 в этом "виновата" стрелка в конце поля, указывающая, что вы работаете с выпадающим списком. И действительно, представьте тег select на черном фоне.
Как видим, стрелка остается серой, несмотря на то, что свойство `background` установлено в черный цвет. Однако выход есть и не один. ##Вариант 1 Самый простой вариант состоит в том, чтобы вообще убрать стрелку. За ее вывод отвечает свойство `appearance`. Установим его в `none`. select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } Результат:
##Вариант 2 Еще один вариант заключается в том, чтобы обернуть тег блоком, немного меньшим по размеру и этим скрыть часть поля со стрелкой. Также можно задать какое-нибудь изображение, имитирующее скрытую стрелку. .hide-select-arrow select { background: transparent; width: 158px; } .hide-select-arrow { width: 130px; height: 46px; overflow: hidden; background: url(arrow_down.png) no-repeat right #000; } Результат:
Предыдущая заметка Верстка витрины
Следующая заметка Lightbox своими руками

Важлива інформація

Міністерство оборони
України
з 24.02 по 17.06
втрати противника
орієнтовно склали:
527390 ( +1080 ) особового складу
7958 ( +2 ) танків
15287 ( +18 ) бойових бронемашин
13927 ( +14 ) артилерійських систем
1104 ( +0 ) РСЗВ
853 ( +0 ) засоби ППО
359 ( +0 ) літаків
326 ( +0 ) гелікоптерів
18991 ( +24 ) автомобільної техніки
28 ( +0 ) кораблі / катери
2296 ( +0 ) крилаті ракети
11167 ( +8 ) БПЛА
2337 ( +12 ) спец. техніки
4 ( +0 ) установок ОТРК/ТРК
1 ( +0 ) war.submarines

Поиск