How to indent multiple levels of select optgroup with CSS?

html css select indentation optgroup
danjah picture danjah · Mar 13, 2011 · Viewed 68.5k times · Source

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... 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'.

http://jsfiddle.net/Tb5Rc/5/

Answer

eliel picture eliel · Apr 22, 2011

8/29/2016 Edit

The original answer below is no longer functional in modern browsers. For those who still need to use a tag instead of doing magic with HTML lists, a better solution was found on this stackoverflow thread: Rendering a hierarchy of "OPTION"s in a "SELECT" tag

I would recommend the solution suggested by igor-krupitsky who suggests dropping   and using the binary   instead. At least on Chrome, this does not break using the keyboard to find the first character of an item in the list.

End Edit

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>
        <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>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>

Hope that helps.

Related questions

problem with <select> and :after with CSS in WebKit

I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML: <select name=""> <option value="">Test</option> &…

Read More
HTML Select tag show vertical scroll with 10 option

I want to make a select box like this with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option. is there any way to achieve this.

Read More
Is there a way to select an open select box in css?

I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something …

Read More