ie10 option disabled style not working - by flagrantHippo

Status : 

  By Design<br /><br />
		The product team believes this item works according to its intended design.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.

ID 785844 Comments
Status Closed Workarounds
Type Bug Repros 0
Opened 4/29/2013 4:33:07 PM
Access Restriction Public


Posted here

To summarize. In ie7, ie8, ie9 a selected option in a select that becomes disabled becuase of some other operation on the same web page  get a red background color using the following style

select option[disabled]
     background-color: Red !important;

In ie10 it never turns red while selected.  Is this bug or by design?
Sign in to post a comment.
Posted by flagrantHippo on 5/13/2013 at 9:30 PM
in ie9 the back ground color used was that of the option style not the page. I only care about other ie browsers and they all behaved the same until ie10. If this was a bug in ie9 it also existed in ie7 and ie8. As far as suggested user experience you misunderstand. It is not about pre-selecting an option for the user. It is a about the user selecting a valid option that becomes invalid after the user makes some other change on the page. I have a page with 6 selectors with complex rules that invalidate options based on selections in other selectors.
1. User selects some option in selector 1
2. User select some option in selector 2 that invalidates selected option in selector 1
3. Either I can change selector 1 under the user's nose to "Please select something" in selector 1 or Instead I can force the user to learn that selector 1's selection has become illegal based on the selection in selector 2.

I think forcing the user to learn is better. In some cases I have rules that could cause a 6th selector to invalidate selectors 1-5. If the 6th was a mistake they would have to re-select 1-5.

Anyway you can close this. In ie10 I just use a red rectangle around the selector to indicate something has BECOME illegal after some other user action.
Posted by Microsoft on 5/13/2013 at 2:06 PM
Thank you for reporting this finding. It's a by-design change in IE10 when we gave the control a new design. You can see the same thing happens on a non-disabled option, and that happens both in IE9 and IE10: if an option is selected, the drop-down is not opened, and the select control is focused, then the background-color style on the option is not respected and the selected style will be used, which is blue for non disabled option and grey for disabled option. This has been working in the same way for non-disabled option. We just had a bug in IE9 for disabled option that it always use the background-color that the page provides.

If you try in other browsers, you'll notice that the background-color specified by the page is not respected at all, when the drop-down is closed. So this is not an interoperability issue.

And as a suggestion for user experience, it's not recommended to have a disabled option pre-selected, because once the user selects a non-disabled option, he can't change the selection back to the disabled option (same across browsers), which tells the user that it's non-sense to select a disabled option, thus the option shouldn't be pre-selected either. If you want to suggest "nothing is selected", you could use an empty string as the value of the option.

Best regards,

The Internet Explorer Team
Posted by Microsoft on 5/6/2013 at 1:50 PM
Thank you for your feedback. We will be investigating this issue further.

Best regards,

The Internet Explorer Team
Posted by flagrantHippo on 4/30/2013 at 8:31 AM
Correct in ie7-ie9 the option does use the red background style for disabled so a selected disabled option is displayed as red to indicate to the user there is a problem. But in ie10 if an option is selected it does not use the red disabled style if it is selected. I especially think this is a bug because if you inspect the option in debugging tools it indicates the background color should be red. Instead it is white when it doesn't have focus. It seems to me in ie10 selected style is overriding disabled style but it shouldn't be because I used !important. I understand when something has focus it is blue. That is fine and expected, but when the select doesn't have focus the background color of red should be displayed at it is in previous versions of ie. I posted a workaround to display a red border. But of course that doesn't work properly in ie7.
Posted by Microsoft on 4/29/2013 at 6:07 PM
Thank you for your feedback.

We are currently unable to reproduce this issue as described. Please be more specific as to what is the behaviour you are observing, and what is the behaviour you are expecting.

I am testing on the latest version of IE10, with the 2nd code sample you provided at:
I have tested by changing the Browser Mode: To IE9 and notice as soon as you click Make Disabled the box and text change. In IE10 it does not change, right away -it only changes after a click in the select box. I have tested in Chrome also and find that the box turns red only after I hover over the text.
Please confirm that I am understanding your question correctly. And you only wish to know if this new behavior " Having to click in the select box" is "By Design" or a Bug for IE10?

We value your feedback. If you have additional information that can help us better understand the issue.

Best regards,

The Internet Explorer Team