Occasionally I've run into a situation where I've wanted to add some whitespace between two options in a <select /> element. The most common solution I've seen people use is to include an empty <option></option> tag pair. While this works, it adds a blank entry that the user can actually select—which means you have to add some code to handle the selection of what is designed to just be used for whitespace.

A better solution is to use an empty <optgroup /> that is disabled:

<select>
  <option>Value 1</option>
  <!---// add a non-selectable space between options, the margin-top is for FF spacing //--->
  <optgroup disabled="disabled" style="margin-top: 1em;"></optgroup>
  <option>Value 2</option>
</select>

This will add a non-selectable blank line between "Value 1" and "Value 2". Here's an example:

Value 1 Value 2

I use this technique often before normal <optgroup /> tags as it helps make the menu look a little cleaner by adding some separation between the options and works with all modern browsers. Best of all, you don't have to worry about handling those empty <option /> tags!

Add Comment

Leave this field empty

Name:

Email Address:

Website:

Comments:

Enter text that you see in the image:

Remember My Information
Subscribe

If you subscribe, any new posts to this thread will be sent to your email address.