Элементы параметров стиля в списке выбора (добавление отступов и/или полей)

Можно ли стилизовать элементы option списка выбора/раскрывающегося списка за пределами фона и шрифта? Я специально хочу добавить отступы/поля, чтобы список не был таким тесным.


html drop-down-menu selectlist option
person Alex    schedule 01.06.2010    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Невозможно, если вам нужна широкая поддержка браузера. По крайней мере, IE его не поддерживает. Тогда нет другого выбора, кроме как имитировать и постепенно улучшать выпадающий список с помощью <ul><li> и хорошей попытки JavaScript. Вы можете получить здесь некоторые идеи о возможностях JS (jQuery на самом деле) на основе раскрывающихся списков.

person BalusC    schedule 01.06.2010
comment
вы всегда должны давать пример кода, а не только ссылку. ваша ссылка битая... - person Rafael Herscovici; 14.01.2013
comment
@Дементик: исправлено. Ссылка теперь немного более постоянная. Пример кода невозможен, так как это слишком много кода. Однако суть должна быть ясна: просто преобразуйте <select><option> в <div><ul><li> с помощью JS, что в конечном итоге дает вам всю свободу CSS. - person BalusC; 14.01.2013

arrow_upward
2
arrow_downward

@Alex: мы были в том же затруднительном положении, что и ты. Мы тоже хотели управлять пользовательским интерфейсом раскрывающегося списка. К сожалению, как уже упоминалось другими, у вас нет выбора в раскрывающемся списке системы, если вы хотите также иметь кросс-браузерную совместимость.

поэтому мы придумали собственный плагин jQuery, который работает как системный раскрывающийся список для большинства функций. Он также поддерживает создание тем, а также гибкость для предоставления настраиваемых элементов списка с помощью шаблонов. Вы можете увидеть образцы работающего кода по следующим URL-адресам и узнать о них больше. Мы уверены, что вы найдете это полезным.

  1. Образец и документация — india.assigninfo.com/assignlabs/jaldropdown
  2. Образец каскадного раскрывающегося списка с coderun.com — coderun.com/ide/?w=GEXVey_kckKrAkLeoIfZNg
  3. Пример кода для настройки jaldropdown из прокручиваемых DIV — coderun.com/ide/?w=BiE5TbXdIEehDOxNk1oajw
person Assign Labs    schedule 02.06.2010

arrow_upward
0
arrow_downward

Это возможно, однако эта функция недоступна в Internet Explorer.

person edl    schedule 01.06.2010