Stupid HTML Tricks: Add a non-selectable option to a select element

Posted by Dan on Oct 16, 2009 @ 11:53 AM

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:

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!

Categories: HTML/ColdFusion

6 Comments

  • Jeff S.'s Gravatar
    Jeff S.
    Pretty useful. I'll have to remember this one...
  • Julian Halliwell's Gravatar
    Julian Halliwell
    Nice technique, Dan, but I tend to be uneasy about breaking the semantics. Optgroup is meant for grouping related select options, not providing white space. Can you not achieve what you want with CSS?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Julian:

    I agree about breaking semantics. Not a big fan of it either. I wish all browsers were created equal--it would prevent lots of hacks.

    As for your question about CSS, no you can not. The only browser that allows you to add margin or padding to an option tag is Firefox--which is what the margin-top hack is for.

    Support for CSS with the option tag is very limited in most browsers. This is a little dated, but still pretty accurate as to what's supported:

    http://www.456bereastreet.com/lab/styling-form-con...
  • maxi's Gravatar
    maxi
    Thanks for this great tip. I am finally able to make my dropdown list look organized.
  • Yudong Li's Gravatar
    Yudong Li
    Sorry, but why not just add a disabled="true" to the blank option line?
    I had similar issue today, and found out your post. While it does work, the provided solution doesn't look nice on some browsers especially with css stylished select controls.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Yudong:

    I need to do a better job documenting the things I tried that didn't work, but if memory serves me correctly there were some issues trying to just disable an empty <option /> tag.

    I seem to recall issues where a browser (probably IE) didn't honor the disable attribute on <option /> tag or it was still allowing keyboard selection. My memory's fuzzy on the issue. It's also possible the problem was in FF3 (or some other browser) that no longer warrants enough browser usage to code for.

    I just know I tried a bunch of solutions using just <option /> tags at first, but I could get anything to work in all the major browsers at the time.

    My memory can certainly be wrong, but you might want to double check that if cross browser issues are something you're concerned about. (Of course it's a minor enough issue, that it may not bother you.)

Comments for this entry have been disabled.