How to indent multiple levels of select optgroup with CSS?

by

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.

More Related Contents:

  1. problem with and :after with CSS in WebKit
  2. How to change font-family of drop down’s list item?
  3. How to change the text color of first select option
  4. Bad: [html] in html code i can’t make two form input in one row [closed]
  5. How to overlay one div over another div
  6. Font Awesome 5 on pseudo elements shows square instead of icon
  7. Center image horizontally within a div
  8. How to change the height of a ?
  9. css ellipsis on second line
  10. How can you customize the numbers in an ordered list?
  11. Is it bad to use !important in a CSS property?
  12. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  13. Can a span be closed using ?
  14. Stop CSS transition from firing on page load
  15. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  16. How to display text, a dotted line then more text spanning the width of the page?
  17. How can I apply a border only inside a table?
  18. What does the clearfix class do in css? [duplicate]
  19. Center image in div horizontally [duplicate]
  20. Add spacing between vertically stacked columns in Bootstrap 4
  21. HTML — Two Tables Horizontally Side by Side
  22. Draw double curved item with beveled edges
  23. How to center an unordered list?
  24. a href link for entire div in HTML/CSS
  25. Center a large image of unknown size inside a smaller div with overflow hidden
  26. How to change border color of textarea on :focus
  27. Is there any way to add padding to select options via CSS?
  28. CSS Selector for No-Children-But-Not-Empty
  29. Change image on hover
  30. Why does a border increase the element’s width?

Leave a Comment