Древовидное выделение в HTML

Как вы заметили, вы не можете вложить одну OPTGROUP в другую. Но вы должны их заключить. Это позволит достичь по крайней мере базового уровня отступа, который вы еще не видите.

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

Поскольку вы все равно не можете перейти к заголовкам OPTGROUP с помощью клавиатуры (и только к фактическому OPTION) ), не должно быть проблем с добавлением метки к & nbsp; для решения кроссбраузерных проблем с заполнением.

Вы должны заключить теги option в теги optgroup-Tags.

Это должно выглядеть так:

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

Надеюсь, это поможет :)

Полагаю, левое поле не делает того, что вы хотите?

Это не совсем хорошее решение, но пробовали ли вы использовать элементы с неразрывными пробелами (& nbsp;)?