Clever Geek Handbook

Best modern way to indent a <select>?

If you are only targeting Firefox, Opera and Chrome, not IE, and you are targeting only modern browsers (released last year), what is the best way to create multi-level indentation of options in select without using optgroups? That is, when you want the parent options to still be selected as well as the children?

<select>
    <option>
    <option>
        <option>
        <option>
        <option>
    <option>
        <option>
        <option>
            <option>
            <option>
            <option>
        <option>
        <option>
    <option>
    <option>
</select>

It would be preferable, although I don't know if it is actually possible to have an actual parent-child relationship between the parameter levels, but if this is not the case, at least the way to make it look like where there is a user experience is similar between the three browsers?

+2


source to share


2 answers


Prefix your text <option>

with the appropriate amount &nbsp;

(character code 160, respectively).



+7


source


Adding special characters certainly works, but it tends to get messy.

Another "semantic" alternative would be to use <optgroup>

. The obvious limitation here is that you cannot nest them inside each other, so you are limited to simple sibling grouping.



You can somewhat overcome this limitation by being creative with your optgroup name like this:

<select>
  <optgroup label="Favorite Food">
    <option value="salad">Salad</option>
    <option value="pizza">Pizza</option>
  </optgroup>
  <optgroup label="Favorite Food &gt; Pizza Type">
    <option value="pepperoni">Pepperoni</option>
    <option value="cheese">Cheese</option>
  </optgroup>
</select>
+3


source






More articles:


All Articles