Как мне оформить окно выбора с градиентами?

Question

Я хотел бы оформить поле выбора с некоторыми градиентами.Моя проблема в том, что как-то добавлена ​​тень.Вы поймете, что я имею в виду, открыв эту скрипку .Градиент обоих классов одинаков ... Я не знаю, почему тень добавляется в поле выбора, и я просто не могу найти решение.Вы можете мне помочь?

Спасибо.

Answer 1

Элемент select обрабатывается базовой платформой / ОС, а не браузером;поэтому их невозможно стилизовать (используя Chrome 8 / Win XP).Если вы чувствуете необходимость использовать стилизованные элементы select, тогда вам нужно использовать обычный элемент HTML (например, ol или ul) в сочетании с JavaScript.

Я собралдемонстрация идей для другого вопроса , который показывает, как этого можно достичь: демонстрация JS Fiddle .

Я не уверен, что вы подразумеваете под 'shadow ', хотя обычно элементы input оформлены с помощью правила псевдоэлемента :focus, чтобы указать, что элемент имеет фокус.Это может быть изменено с помощью:

select:focus {
    outline: 0 none transparent; 
}

Хотя это уменьшает доступность формы для тех, кто перемещается с клавиатурой / не-мышью устройства ввода.В идеале лучше определить outline, который соответствует дизайну вашего сайта.