-
Notifications
You must be signed in to change notification settings - Fork 12.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Normalizing the display of disabled fields across Windows browsers #1022
Conversation
… adding a background-color to disabled text inputs and textareas in IE7 & 8. IE6 is not included because it does not support the attribute selector, and IE9 is not included because index.html doesn't currently apply a class to make targeting IE9 possible. For more details see http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields/.
Hi TJ, thanks for mentioning the problem and the thorough write up. We don't include any use of the IE classes in the default CSS because it is meant to work even if you don't use the helper classes. They also change the specificity of rules, meaning that if someone wanted to update the background color for all browsers they might be confused to find that their selector doesn't seem to affect IE. There are also many text-like inputs that would need to be targeted...more than it is practical to include in a selector. Perhaps this can be sidestepped by using the generic I'm also not sure about how possible or necessary it is to try and get all browsers to display disabled form controls in the same way by default. So I'm just going to leave this PR open for a while to have some time to ponder and come back to it later. Thanks again. |
Hi, Regarding that PR, i'm wondering if it's not something more in the field of normalize.css. Adding input[disabled], select[disabled], area[disabled], button[disabled] {
background-color: #EBEBE4;
} near https://github.com/necolas/normalize.css/blob/master/normalize.css#L429 will do the trick, at least in IE>6. Is specificity really a problem in this case? |
I like this. Provides a better affordance for the user. I know making a dependency on the IE classes is unprecedented, but an optional feature like this it seems reasonable. |
@necolas In response to handling the other input types: IE actually does a pretty good job making disabled buttons look disabled so nothing should need to be done for I agree that by including the IE classes there is a potential specificity issue, but I would think adding a background-color to form fields is a pretty uncommon thing to do. You had also mentioned the possibility of using the generic @Florian-R I don't think this makes sense in normalize because I don't believe it is a good idea to blindly apply this across all browsers. I'm specifically trying to fix this for IE since most all other browsers do a pretty decent job making disabled fields look non-interactable to the user (I have a bunch of images with how they all look here). The idea is not necessarily to get a consistent look for disabled fields; it's to fix a usability issue in IE <= 9. All non-IE Windows browsers apply the grayish background-color so I thought it would make sense to make IE consistent. When there's no text in the input you really have no idea that the field can't be interacted with. I've seen people get frustrated / confused by this firsthand. |
The HTML5 input types are relevant. Just tested in IE8 and changing the type to anything other than Applying these rules just to IE7/IE8 (via a method that I think is problematic) leaves IE9 looking different. You could make a case for only wanting to bring browsers in line on Windows, and leaving all the OSX browsers and the major browsers on mobile looking different, but why introduce relatively significant cross-browser differences that are different to those developers might expect when they are styling forms? And even then, we're still left with the same problems of specificity and depending on HTML that might not be there. I'm starting to think this is something that is a level outside of the boilerplate's starting CSS. |
Perhaps it could be added to the Better Web Development CSS section. That way, it's not included in the base code, but users are still made aware of the issue, and are given the option of including it themselves. |
@necolas I agree with your arguments. I might feel differently if the boilerplate still applied an |
@tjvantoll Why not. You've got a good and detailed post about your research. Feel free to add it to the wiki (and also a link to this issue for the additional discussion we've had) and then please close this issue when you're finished. Thanks! |
Done. Thanks for your time and feedback. |
At my company we recently removed custom disabled field styling we were applying throughout our systems and falling back to the browser defaults. What we found is that IE6 through IE9 do a pretty terrible job indicating to the user that text inputs and textareas are disabled, especially when there is no text present in the fields.
All non-IE Windows browsers apply a background-color of #EBEBE4 to disabled fields making it very evident to the end user that the field is disabled. Interestingly enough IE10 looks to be doing this as well. Therefore this pull request is to add the background-color to text inputs and textareas in IE7 & IE8 using the lt-ie9 class index.html applies. The problem is also present in IE6 & IE9 but... the fields can't be targeted in IE6 because of no attribute selector support, and the boilerplate currently doesn't apply a class that can target IE9.
Here's a before and after applying this change that you can view in IE6 - IE9 the problem this is attempting to fix.
Before: http://jsfiddle.net/ygwnh/12/
After: http://jsfiddle.net/K5wDY/1/
I'm not sure if this is a big enough problem to be included in the boilerplate but I thought it was worth bringing up for discussion. I have a more thorough write up of the problem with more examples on my blog here - http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields/.
Thanks.