CODEWITHSUNDEEP
javascripthtmlcssinternet-explorerxhtml
Sumeet Pareek
Sumeet Pareek

Reputation: 2819

HTML and CSS possibilities when wrappeded inside 'select' tags

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 ;)

Upvotes: 0

Views: 494

Answers (4)

Cristian Toma
Cristian Toma

Reputation: 5799

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.

Upvotes: 1

Ettiene Grobler
Ettiene Grobler

Reputation: 525

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

Upvotes: 0

DisgruntledGoat
DisgruntledGoat

Reputation: 72520

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.

Upvotes: 0

scunliffe
scunliffe

Reputation: 63588

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"

Upvotes: 3

Related Questions