CSS: стиль HTML <select>элементы с множественным выбором

Question

Я использую некоторые <select row="3" multiple="multiple"> элементы на странице.

Я пытался стилизовать их так, чтобы текст внутри соответствовал остальной части страницы.
Я начал с измененияшрифт (select {font-family: 'foo';}).Но мне нужен увеличенный размер шрифта и высота строки для нового шрифта.И это не позволяет мне изменить это.Я пытался использовать встроенные стили, стиль select и стиль option s.

Как изменить свойства, такие как font-size и line-height внутри поля <select>

Answer 1

К сожалению, не все браузеры позволяют изменять расположение элементов SELECT или OPTION.

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

Хороший веб-сайт, объясняющий вам, что стилизовать CAN , выглядит следующим образом: Таблица, содержащая всю необходимую информацию .

Ваш HTML:

<select multiple="multiple">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
</select>

Ваш CSS (пример):

select {
    font-family: 'Times New Roman';
}

select option {
    background-color: #FFFF00;
    color: #FF0000;
}

Answer 2

Результаты могут зависеть от ОС, а также от браузера.Несмотря на то, что стили CSS могут применяться для элементов select и options, я вижу, что некоторые браузеры (особенно старые) могут просто отложить использование ОС для отображения этих виджетов.

Этот вопрос похож на Как оформить выпадающий список

Answer 3

Я поражен, что никто еще не упомянул Выбран .

Chosen - это плагин jQuery, который делает длинные, громоздкие поля выбора намного более удобными для пользователя.

Поддерживаются все современные настольные браузеры (Firefox, Chrome, Safari и IE9). Устаревшая поддержка IE8 также включена. Функция «Выбран» отключена на мобильных устройствах iPhone, iPod Touch и Android.

Поскольку он заменяет элемент select на div, а затем связывает все события между ними, вы можете стилизовать его по своему усмотрению, и он все равно будет реагировать так, как если бы это был обычный блок выбора. Довольно круто.