bug 523 - disabling option elements fails in Safari on iOS

Issue: #523 Affects: Safari on iOS (iPod, iPhone, iPad) Select options support a disabled attribute so that developers can optionally disable individual options if/when they are not applicable. Safari on the desktop (Windows or Mac) both support this attribute however Safari on iOS (so iPod, iPhone, & iPad) the attribute doesn't actually do anything and the user is free to select the option even though it is supposed to be disabled. Example:

<select>
  <option value="1">first<option>
  <option value="2">second<option>
  <option value="3" disabled="disabled">third<option>
  <option value="4">forth<option>
</select>

If this select list were rendered on an iPhone or iPad you would be able to select the "thrid" option. It's not a Webkit bug, since the same select list will render perfectly on other tablets like the BlackBerry PlayBook.

Known Workarounds: Two. You'll need to either need to remove the options, or inform the user after their selection that it isn't valid (not recommended for usability purposes)

Related Issues: None. Bug/Site Feedback | Submit a bug

bug 119 - no title for options or select in IE6

Issue: #119
Affects: IE6
Fixed In: IE7

Note: Updated synopsis to include the select element, not just the options.

Have you ever wanted to provide more descriptive text in the form of a tooltip in your Web applications? Of course you have. It may have slipped your notice though, that this doesn't work on select list options (or even the select list itself) in IE6 (fixed in IE7).

Example:

<select size="3">
  <option value="1" title="Web Bug Track">WBT</option>
  <option value="2" title="Bugzilla Bug Tracking">Bugzilla</option>
  <option value="3" title="Tracker Bug Track">Tracker</option>
</select>

WBT
Bugzilla
Tracker

Known Workarounds: None.

Related Issues: (bug 291) (bug 280).

Bug/Site Feedback |
Submit a bug

bug 280 - lack of events for options

Issue: #280
Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4, IE9 RC 1, Opera, Safari 3, Safari 4 Beta, Chrome v1, ?
Partially Fixed in: Opera 9.5-9.64 (onclick, onmouseover, onmouseout, onmousedown, onmouseup fixed!)
Partially Fixed in: Safari 4.0 (onclick, onmouseover, onmouseout, onmousedown, onmouseup fixed!)
Partially Fixed in: Chrome 2.0 (onclick, onmouseover, onmouseout, onmousedown, onmouseup fixed!)


The option element is used inside a select element to provide options for the user to select from. Like all visually displayed elements in the browser, you can attach event handlers to them too.

Well, not quite. The following table indicates the level of support for each browser, and event.

Event	Firefox	Internet Explorer	Konqueror	Opera	Safari	Chrome
onclick	Yes	No	?	Yes	No (v4.0 Yes!)	No (v2.0 yes!)
onmouseover	Yes	No	?	No (v9.5 Yes!)	No (v4.0 Yes!)	No (v2.0 yes!)
onmouseout	Yes	No	?	No (v9.5 Yes!)	No (v4.0 Yes!)	No (v2.0 yes!)
onmousedown	Yes	No	?	No (v9.64 Yes!)	No (v4.0 Yes!)	No (v2.0 yes!)
onmouseup	Yes	No	?	No (v9.64 Yes!)	No (v4.0 Yes!)	No (v2.0 yes!)
keyup	No	No	?	No	No	No
keydown	No	No	?	No	No	No
keypress	No	No	?	No	No	No

Only Firefox seems to support the full array of mouse events, Opera is next supporting an onclick event, but in IE and Safari(win) there is no support for mouse events on options.

Oddly enough, no browser seems to support keyboard events on options.

View the following samples in Firefox, Safari or Opera and IE.

Example:


Samples
Red (click)
Blue (mouseover)
Green (mouseout)
Cyan (mousedown)
Teal (mousedup)
No events here
Or here
Orange (keydown)
Yellow (keyup)
Aqua (keypress)

Known Workarounds: None.

Related Issues: bug 291.

bug 293 - can't disable options in IE

Issue: #293
Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4
Partially Fixed in: IE8 Partner Release 1

MSIE Feedback ID: 336685

Yet another issue with select lists in IE. First you couldn't style them (bug 291) then it turns out, you can't disable them either!

Example:

<select>
  <option>I am valid</option>
  <option>I am valid too</option>
  <option disabled="disabled">I am NOT valid</option>
  <option>I am also valid</option>
</select>

Try it for yourself, load this page up in IE and any other browser.

I am valid
I am valid too
I am NOT valid
I am also valid


Update: IE8 partially fixed this in that you can disable options and thus they render grayed out and can't be selected by mouse - however they can still be selected by alphabetic key presses. (e.g. in the sample above, press "i" until you see that you've selected the disabled option)

Known Workarounds: None.

Related Issues: bug 291.

bug 291 - no styling options in IE and only some in Safari

Issue: #291
Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4, Safari 3, Safari 4

CSS was meant to be the solution to applying global styling, without interfering with the content of a page. For the most part, it works really well, although IE has been very slow to catch up to the other major browsers in this arena.

Case in point. The option element is used inside a select element to provide options for the user to select from. In IE, you can style it any way you want, as long as all you want to style is the font and the color... because all other styling options just won't work!

View the following samples in Firefox, Safari or Opera and they will work like a charm*. In IE the colors work, but after that, it just ignore the styling requests.

Example:

Red
Blue
Green
Lots of padding
Background Image


Note: In Safari the background colors do work, but the background images and padding do not.

Known Workarounds: None.

Related Issues: None.