Style Option Elements in Select List (Add Padding and/or Margins)

Question

Is it possible to style the option elements of a select list/dropdown beyond background and font? I'm specifically looking to add some padding/margins so the list isn't as cramped.

Answer 1

Not possible if you want broad browser support. At least IE doesn't support it. There's then no other option than to mimic and progressively enhance the dropdown with <ul><li> and a good shot of JavaScript. You can get here some ideas what's possible with JS (jQuery actually) based dropdowns.

Answer 2

@Alex: we were in the same predicament as you seem to be. We too wanted to control the UI of the dropdown. Unfortunately as others have already mentioned, you have no option with the system dropdown if you want to have cross-browser compatibility also.

so we came up with our own jQuery plugin which works like a system dropdown for most features. It also supports themeing as well as flexibility to provide customized list items by way of templates. You can see the running code samples from the following URLs listed and learn more about it. We are sure you will find it useful.

1. Sample and documentation - india.assigninfo.com/assignlabs/jaldropdown
2. Cascading dropdown sample code from coderun.com - coderun.com/ide/?w=GEXVey_kckKrAkLeoIfZNg
3. Sample code to configure jaldropdown from within scrollable DIVs - coderun.com/ide/?w=BiE5TbXdIEehDOxNk1oajw

Answer 3

It is possible however the functionality is not available in Internet Explorer