Best modern way of creating indentation in a <select>?

问题

If you're only targeting Firefox, Opera, and Chrome, not IE, and you're only targeting modern browsers (released in the ~past year), what is the best way of creating multi-level indentation of options in a select without using optgroups? That is, when you want the parent options to still be selectable, 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, though I don't know if it's actually possible yet, to have actual parent/child relationships between levels of options, but if it's not, at least a way of making it look like there is, where the user-experience is similar between the three browsers?

回答1:

Prefix your <option> text with an appropriate amount of   (character code 160, respectively).

回答2:

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

Another 'semantic' alternative would be to use <optgroup>. The obvious limitation here is that you cannot nest them inside of one another, so you are limited to the simple one-level grouping.

You can somewhat overcome this limitation by being creative with your optgroup naming 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>

来源：https://stackoverflow.com/questions/8987028/best-modern-way-of-creating-indentation-in-a-select