Indenting HTML <select> options

In CHADIS, we had a requirement to indent certain <option> elements within a <select> dropdown list. Until recently, only team administrators had to use these pages, so we just made it work in Mozilla Firefox and left the other browsers out in the cold. Now that we have some new features that need this capability, I decided to write-up a quick page to demonstrate each technique we tried and how each browser renders them. You can see the investigation and results below. Enjoy.

Update (2009-06-29): Andreas Stieger points out that <optgroup> is an possibility, here. Unfortunately, for our purposes, we needed multiple levels of indentation and the options must be selectable. <optgroup>, while easy to implement and relatively consistent rendering across browsers, fails to meet these criteria.

This first dropdown uses only CSS to attempt to indent the select options. Also, CSS bold property is being used to style the top-level items while italics are used to style the second-level items. This ideal rendering was produced by Mozilla Firefox 3.0.6 with no alterations.

Select dropdown using CSS styles

Select dropdown indentation using CSS styles

This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.

This next dropdown uses nonbreaking space (&nbsp;) characters to indent the sub-items. The bold and italic items from the previous attempt are being left in place. Three &nbsp; characters for each level of indentation seem to look the best on most browsers. This ideal rendering was produced by Mozilla Firefox 3.0.6 with no alterations.

Select dropdown indentation using

Select dropdown indentation using &nbsp;

This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.

Now, em dashes (&mdash;) are used for indentation instead of nonbreaking spaces, along with a trailing standard space. Bold and italics are still in place. This ideal rendering was produced by Mozilla Firefox 3.0.6 with no alterations.

Select dropdown indentation with &mdash;es

Select dropdown indentation with &mdash;es

This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.

Now, the em dashes (&mdash;) used for indentation are being styled as white-on-white, so they should disappear. Bold and italics are done using <i> and <b> tags. This ideal rendering was produced by rendering the previous strategy in Mozilla Firefox 3.0.6 and removing the dashes by hand.

Select dropdown indentation using whitened &mdash;es

Select dropdown indentation using whitened &mdash;es

This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.

After trying these techniques on the major web browsers, here’s what I found:

Browser CSS nbsp mdash white mdash (<style>) CSS bold/italic <b>/<i>
Microsoft Internet Explorer no yes yes no no no
Mozilla Firefox yes yes yes no yes no
Opera no yes yes no no no
Apple Safari no yes yes no no no
Google Chrome no yes yes no yes no
Konqueror no no no no no

Looks like using &amp;nbsp; is the best solution for all browsers, and using CSS styling will enhance the display for certain browsers but not interfere with others.

Updated 2009-02-13: Added Konqueror info.

Comments are closed.