Tree-like Select in HTML

Question

I'm trying to create a tree-like <select> using HTML and CSS.

To maintain accessibility I'd like to avoid javascript if possible. I'd also like to avoid using   instead of padding, as this prevents pressing letter keys to jump to items.

What I have so far is this:

<select>
    <optgroup label="fluffy" style="padding-left: 10px;"></optgroup>
     <optgroup label="kitties" style="padding-left: 20px;"></optgroup>
      <option value="1" style="padding-left: 30px;">Fluffykins</option>
      <option value="2" style="padding-left: 30px;">Mr Pooky</option>
     <optgroup label="puppies" style="padding-left: 20px;"></optgroup>
      <option value="3" style="padding-left: 30px;">Doggins</option>

    <optgroup label="not fluffy" style="padding-left: 10px;"></optgroup>
     <optgroup label="snakes" style="padding-left: 20px;"></optgroup>
      <option value="4" style="padding-left: 30px;">Fingers</option>
     <optgroup label="crabs" style="padding-left: 20px;"></optgroup>
      <option value="5" style="padding-left: 30px;">Lucky (AKA Citizen Snips)</option>
</select>

This works fine in Firefox, but IE ignores the padding, rendering it as a flat list (quite hard to use) and Chrome doesn't render the <optgroup>s, which are technically not valid as an <optgroup> is supposed to contain at least on <option>.

Unfortunately <optgroup>s can't be nested.

This is how Firefox renders it

Answer 1

You have to wrap the option-Tags with the optgroup-Tags.

It should look like this:

        <optgroup label="kitties" style="padding-left: 20px;">
            <option value="1" style="padding-left: 30px;">Fluffykins</option>
            <option value="2" style="padding-left: 30px;">Mr Pooky</option>
     </optgroup>
        <optgroup label="puppies" style="padding-left: 20px;">
            <option value="3" style="padding-left: 30px;">Doggins</option>
     </optgroup>

Hope it helps :)

Answer 2

As you've noted, you can't nest one OPTGROUP within another. But you do have to enclose them. This will achieve at least the base level of indenting you're not already seeing.

<optgroup label="fluffy" style="padding-left: 10px;">
  <optgroup label="&nbsp;&nbsp;&nbsp;kitties" style="padding-left: 20px;">
     <option value="1" style="padding-left: 30px;">Fluffykins</option>
     <option value="2" style="padding-left: 30px;">Mr Pooky</option>
  </optgroup>
  <optgroup label="&nbsp;&nbsp;&nbsp;puppies" style="padding-left: 20px;">
     <option value="3" style="padding-left: 30px;">Doggins</option>
  </optgroup>
</optgroup>

Since you can't jump to the OPTGROUP headings with the keyboard anyway (and only to the actual OPTION), there should no problem padding the label out with   to work across the cross-browser issues on padding.

Answer 3

I assume margin-left doesn't do what you want either?

Answer 4

It is not a really good solution, but have you tried intending the elements with non breaking spaces (& nbsp;) ?