стили выпадающих списков (выберите)

Question

Я знаю, что с помощью jquery можно создать нечто, похожее на поле выбора, чтобы я мог выглядеть так, как мне хочется. Тем не менее, с помощью только CSS, какой контроль я могу иметь?

Я использую границы, отступы и ширину, и конечный результат выглядит великолепно.

Единственное, что беспокоит меня, это часть, которая падает. Есть ли контроль над этим? (Кажется глупым иметь отступы, а в выпадающем списке их нет).

Answer 1

У вас есть некоторый контроль, но между браузерами и операционными системами довольно много различий.Например, Internet Explorer в Windows всегда будет показывать стандартную серую стрелку вниз, даже если вы можете перекрасить ее в других браузерах.

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

select {
   border: 1px solid red;
}

option {
   background-color: blue;
}

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

• Стили управления формой в целом: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
• Выбирает конкретно: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
• Сравнение браузера: http://www.electrictoolbox.com/style-select-optgroup-options-css/