Я хочу добавить дополнение к параметрам тега html "select".Как добавить дополнение к выпадающему списку html?
Я пытаюсь добавить его в свойство стиля «select» и «option», и он не работает в IE.
Что я могу сделать?
ОК, я ненавижу звучать все 1990-е годы, но просто до и приложение заканчивается пространство для текста вариант приемлем для ваших желаемых целей?
+1 голос: Это лучшее решение, учитывая, что OP хочет просто добавить какое-то пространство влево и вправо, и если он не хочет потратить пару часов на реализацию пользовательского раскрывающегося списка. –
Пожалуйста, не делайте этого. Это предотвращает выбор опций из списка путем ввода. Он также разбивает автозаполнение. Это особый импеданс для пользователей с требованиями к доступности. –
** Другое решение, которое работает во всех браузерах **, добавляет ' ' в первый вариант в списке выбора check [this] (http://stackoverflow.com/questions/25752/how-do-i-put-a -space-character-before-option-text-in-a-html-select-element) и [this] (http://stackoverflow.com/questions/5828697/how-to-retain-spaces-in-dropdownlist- asp-net-mvc-razor-views), помогает Надежда. – stom
CSS:
option{
padding: 0.5em;
}
В IE он не работает. – Billy
Единственный браузер, в котором работает это Firefox. Safari, Chrome и Opera не обращают на это внимания. –
трудно стиль выпадающего поперечного окна браузера. Чтобы получить какой-либо контроль, вам нужно закодировать замену на JavaScript. Имейте в виду, однако:
следующие работы, в FF3 + и Мидори (и, предположительно, другие 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;}
ширина должна позволить ан ough room в отображаемом поле select, когда он неактивен, поле делает то, что он всегда делает, text-indent используется для сидения между левой границей поля выбора и внутренним текстом. line-height - это просто вертикальное расстояние.
Я не могу прокомментировать его использование в IE, я боюсь, поэтому, если кто-нибудь сможет подкармливать или адаптироваться, чтобы это было хорошо.
Стоит отметить, что выпадающая часть выбора (select *) не касается меня по какой-либо причине за пределами FF3, поэтому, если бы это был вопрос, на который вы хотели ответить, я приношу свои извинения за то, что ничего нового не предлагаю.
Demo по адресу: http://davidrhysthomas.co.uk/so/select-styling.html
Я не мог заставить это работать с отступом или интервалом по какой-то причине. Я пошел с раствором JQuery, который выглядит следующим образом:
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});
Создать класс для SELECT,
.listBox{
width: 200px;
...etc
}
Теперь определим Css для опций SELECT,
.listBox option{
padding:4px;
...etc
}
Протестировано на IE 10
что вы пытаетесь сделать? почему вы хотите использовать опции выбора? –
Я хочу добавить некоторое пространство в левую и правую части опций выбора, чтобы он выглядел лучше. – Billy