HTML / CSS: Nested <options> in a <select> field?

Question

Is it possible to create nested option fields in a form drop down, much like you would create nested ul lists?

Since the change is just aesthetical, is it possible to do this with css?

Answer 1

You can use <optgroup> to create a single level of nesting...

<select>
  <optgroup label="Options 1">
     <option>Option 1.1</option>
     <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Options 2">
     <option>Option 2.1</option>
     <option>Option 2.2</option>
  </optgroup>
</select>

Example: http://jsfiddle.net/JaZAm/1/

Note that the group labels are not selectable options. In that case, I would recommend using the text-indent solution that is mentioned in the top answer to the question that home linked to in his comment.

Answer 2

You cannot nest multiple <option>s. If you want to group <option> elements, use <optgroup>.