How to indent multiple levels of select optgroup with CSS?

Question

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

Answer 1

As an addendum to lucian's answer, newer versions of Chrome don't seem to support having   embedded in the text. It will actually show the ampersand etc instead of giving you the non-breaking space. However, I found that using the unicode version of the non-breaking space will still work ok.

I'm using Scala so was able to just have "\u00A0" in my server-side code. You probably could paste the unicode character directly into your code but I wouldn't recommend it (just because it'd be so hard to tell that it isn't a normal space).

One nice thing is that Chrome at least will ignore the spaces in terms of keyboard navigation. If I have an option named Test, typing t still will move the highlight right to it, no matter how many non-breaking spaces prepend it.