HTML and CSS possibilities when wrappeded inside 'select' tags

Question

I need to display options present in a select region (allowing multiple select) in form of tree. This tree needs to be collapsible/expandable. I have implemented it such that it looks and works as intended in FF.

 - 1
   - 1.1
     + 1.1.1
     - 1.1.2
       - 1.1.2.1
       - 1.1.2.2
       - 1.1.2.3
     + 1.1.3

I have achieved this by styling <option> tag with left padding and a google-like '+' '-' background. The JS for collapsing et al in done using jQuery.

But in IE things look as if no changes had been made and the JS does not work either :|

 1
 1.1
 1.1.1
 1.1.2
 1.1.2.1
 1.1.2.2
 1.1.2.3
 1.1.3

Does IE not allow attaching padding, backgound etc to <option> tags? How can I do this differently?

It is not possible to not support this work on IE6. Saving the debate on that for later ;)

Answer 1

Styling <option>s in IE is quite limited. I'm afraid you won't find any solution using the <select> element as your container.

In brief:

• no padding
• no background images
• no event handlers (onclick, onkeypress, etc.)

IE (5,6,7,8) only support changing the text color, background color and font of the option elements.

There is a jQueryUI Tree in development and various implementations out there for jQuery already. I would highly recommend using one of them. (PS most of them use the UL, LI tags to form the structure)

I quite like this one. "jQuery File Tree"

Answer 2

Styling form controls is very problematic. The only way to achieve browser consistency is to replace form elements with regular elements like styled divs.

This jQuery click menu plugin might be useful, you can use it to set a hidden input on click.

Answer 3

Aren't you really looking for a multi-level accordion script ? That's what accordions do, they expand and collapse.

Answer 4

You can use a rich combobox widget. ExtJS (You can find it here) is a very good widget library and they have great support on their forums.