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

В современном дизайне очень часто возникает ситуация, когда выпадающий список `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; } Результат: