Добавление отступов для выбора параметров

Я хочу добавить какое-то пространство (padding, margin или что-то еще) между опциями выбора в html с помощью css. Я уже пробовал использовать что-то вроде:

 select option {
     padding:10px
 }

однако это не сработало. Я уже читал, что это можно сделать, но это не работает в IE. Во всяком случае, я бы хотел, чтобы это работало в других браузерах, даже если оно не работает в IE.

PS: в настоящее время используется Chrome

Пример JSFiddle

Ответ 1

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

Ограничение зависит от браузера в браузере, например, добавление и даже маржа тега параметра работают в firefox Mozilla, в то время как он не работает с хромом.

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

Ответ 2

Появление тегов опций определяется браузером в моем опыте и часто по уважительной причине - подумайте о том, как по-разному выглядит внешний вид iOS v chrome и преимущества этого.

Однако вы можете использовать некоторый элемент управления элементом select, используя атрибут appearance с префиксом браузера.

Например:

select {
    padding: 2px 10px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

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

Если вам нужен более тонкий контроль, лучше всего я думаю, что это @sumitb.mdi предложение плагина jquery или создать что-то похожее с нуля.