You would expect that being able to disable an option in a <select> element (read: dropdown box) would be a fairly important feature for a browser vendor to implement. From a Human Computer Interaction (HCI) standpoint, it is vital – as it lets the users know the option is exists, however under the current circumstances it is temporarily unavailable.
According to the W3C specifications for HTML4, there is an attribute available for both the <select> and <option> elements, which has the desired effect. The attribute in question is disabled (scroll down a little bit to see the
According to the above specifications, you should expect that if you apply the
disabled attribute to either a <select> or an <option> element, that it would become unavailable. If applied to the <select> element, the entire dropdown list will be greyed out and not selectable. If only applied to the <option> elements, the dropdown may be selected, however the options which are disabled will be greyed out, not selectable and focus will slide over them should you navigate through the options with the keyboard. The guidelines are very clear what is to be expected by this attribute.
Following is a small code snippet of how it should be implemented:
<form action="form.asp" method="post">
<select id="dropdown" name="dropdown">
<option value="snake" disabled="disabled">Snake</option>
<option value="spider" disabled="disabled">Spider</option>
<input type="submit" value="submit />
You can use two variations on the syntax for the disabled attribute, depending on the version of HTML you are targeting:
- HTML4: <option value=”spider” disabled>Spider</option>
- XHTML: <option value=”spider” disabled=”disabled”>Spider</option>
The rendering of the above code snippet and the disabled select should be comparable to the below screenshots:
This is where everything starts to slowly fall apart. The major browsers that are in use today are IE6, IE5.5, Mozilla/Firefox, Opera, Safari, OmniWeb. Of those, IE6 is without question the most used browser around the world. This strikes a problem for web developers, as its support for the new web development techniques (read: CSS1, CSS2 and soon CSS3) are either not present at all or worst yet, present but implemented incorrectly.
It never ceases to amaze me how a browser like IE6, managed to not implement something as trivial as an attribute like
disabled. The IE team managed to implement it against the <select> element, but some how overlooked the <option> element. They implement the
readonly attribute against the appropriate elements – yet some how the
disabled attribute managed to be overlooked when they implemented it. More surprising is that, since the HTML4.01 specification came out in late 1999, IE has been updated and upgraded for various things literally hundreds of times. Why hasn’t this made it into an update? You’d begin to think that Microsoft aren’t aware of it, however the thought of that just seems too far fetched.