Как выбрать стиль выпадающего списка?

Question

Я на Mac под управлением Firefox.У меня есть веб-сайт, и у выпадающего списка выбора есть забавный стиль:

Когда я смотрю на другие сайты в одном браузере, они выглядят по-разному:

Или даже по моему коду здесь: jsFiddle

Что может быть причиной того, что мой сайт показывает, как это происходит, потому что, насколько я понимаю, у вас очень мало контролянад тем, как отображаются поля выбора?

Спасибо

Answer 1

Используете ли вы CSS для форматирования <select>? Или сброс CSS? Если вы используете некоторые правила, такие как border или background, стиль по умолчанию исчезнет, ​​и вы получите это серое поле Вы должны удалить эти настройки CSS.

Answer 2

Второй пример отображается с использованием системного представления выбора.Первый вариант не похож на выбор системы, поскольку, скорее всего, применен какой-то пользовательский стиль, который не просто сбрасывает представление системы.

Как правило, невозможно эффективно стилизовать поля ввода HTML, кроме текстовых полей.Чтобы сделать это, разработчики обычно повторно реализуют элементы управления вводом, используя сложный HTML, это предлагает Ян Девлин.

Answer 3

Стиль выпадающего меню по умолчанию варьируется в зависимости от браузера. К сожалению, нет реального способа CSS, чтобы изменить их стиль.

Тем не менее, вы могли бы использовать плагин jQuery, такой как этот: Поле выбора пользователя , которое я использовал в прошлом для хорошего эффекта.