HTML select list non selectable

[hosdank]

Is there a way I can have an option in a SELECT list be non selectable?
I have a

<option>----------------------</option>

For a break between to options. But I want it so when they drop down the SELECT list and they put there mouse over the break option it does not highlight. Thanks

[SpOrTsDuDe-Reese]

You can use javascript and disable it I believe...but that would be redundant, yes?

[Medyman]

Use the disabled attribute.

http://www.w3schools.com/TAGS/tag_option.asp

[jscheuer1]

I don't think so. In FF it's easy:

<option disabled>----------------------</option>

But IE 7, probably others will not go along with that. There are various things you can do to it in javascript, like return false or blur it onclick, onselectstart, onmouseover or onfocus, but none of these seem to work in IE 7 either. The select can have its onchange event, but I can't see any way of using that either, it fires after the option is selected - it still won't prevent the option from being selected, it could discard it in favor of another option, but the select will still close, and the option will still be available in the drop down list.

I think that the only cross browser solution that might work would be to use a substitute select element made up of divisions, each with their own javascript events attached to them.

However, something like so might be acceptable:

<select name="" onchange="if (this.options.selectedIndex == 4){this.options.selectedIndex = 0;alert('Please select an option.');this.focus();}">
<option value="" selected>Select</option>
<option value="">a1</option>
<option value="">b1</option>
<option value="">c1</option>
<option value="" disabled>---------------------</option>
<option value="">a2</option>
<option value="">b2</option>
<option value="">c2</option>
</select>