Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 358
stef Avatar asked Sep 20 '11 17:09

stef


2 Answers

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.

like image 97
Chris Marasti-Georg Avatar answered Sep 21 '22 07:09

Chris Marasti-Georg


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

like image 37
Rob W Avatar answered Sep 17 '22 07:09

Rob W