Danjah Danjah - 1 year ago 462
HTML Question

How to indent multiple levels of select optgroup with CSS?

Just trying to indent optgroup blocks by nesting depth really, I've tried a general

rule, nested elements then trying to apply the same rule, tried
... is indenting like this possible? It seems elementary :P

In the example below, the optgroup labelled 'client2_a' should be indented more than the others, because it is nested inside 'client2'.


Answer Source

The current HTML specification does not provide for nested tags adding any functionality (such as indentation). See this link.

In the mean time, you can manually style your levels with CSS. I tried using styles in your sample, but for some reason they did not render correctly, so at the very least the following will work:

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>

Hope that helps.