Как добавить дополнение в html dropdownlist?

Ответ 1

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

Ответ 2

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

• Помните, что пользователь может столкнуться с трудностями при использовании вашего раскрывающегося списка - возьмите usabilty во внимание
• Заменить элемент select на JS - это проблема доступности (а также позволяет пользователям без поддержки JS использовать ввод формы)

Ответ 3

В FF3 + и Midori (и, предположительно, другие браузеры Webkit) работает следующее:

select
        {width: 14em;
        margin: 0 1em;
        text-indent: 1em;
        line-height: 2em;}

select *    {width: 14em;
        padding: 0 1em;
        text-indent: 0;
        line-height: 2em;}

Ширина должна позволять достаточно места в отображаемом поле select, когда он не активен, поле делает то, что он всегда делает, text-indent используется, чтобы симулировать заполнение между левой границей поля выбора и внутренним текстом, line-height позволяет просто вертикальное расстояние.

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

Стоит отметить, что выпадающая часть select (select *) не затрагивается за пределами FF3 для меня по какой-либо причине, поэтому, если это был вопрос, на который вы хотели ответить, я приношу свои извинения за то, что ничего нового не предлагаю.

Демо на: http://davidrhysthomas.co.uk/so/select-styling.html

Ответ 4

Создайте класс для SELECT

.listBox{
   width: 200px; 
   ...etc
}

Теперь определите Css для параметров SELECT

 .listBox option{
     padding:4px;
    ...etc
  }

Протестировано на IE 10

Ответ 5

CSS

option{
 padding: 0.5em;
}

Ответ 6

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

$(document).click(function(){  
  $('#selector option').each(function(){  
    $(this).html("  "+$(this).text());  
  });  
});