Set color for disabled form elements #1403
Conversation
Setting the color on form elements (e.g. button) also overwrites the disabled styles of the user agent: http://jsfiddle.net/rmHKu/1/ Therefore it is necessary to explicitly set the disabled style: http://jsfiddle.net/LfAUR/1/
|
Makes sense to me, as this is in main.css and not a normalize css feature. At least as long as this isn't a tweak that belongs in normalize.css . |
|
👍 |
|
i really don't know if this belongs in main.css or normalize.css =/ |
|
This only needs to go into normalize.css when there is an inconsistency between browsers. Since normalize.css does not set any colors for inputs there is no need to overwrite them when disabled. This change is a valid request and I think this is something we should tackle. Thanks for taking the time to do this Pull Request, @ArloL. I've checked the default color of disabled links in Chrome and Firefox. Maybe we need to research IE and Safari. Also mobile browsers would be relevant. |
Android 4.1.2 (Samsung Galaxy S III)Values
Screenshots
¹ default Android browser iOS 6.1.3 (3rd generation iPad)Values
Screenshots
¹ Safari for iOS also uses Mac OS X 10.8.4Values
Screenshots
Ubuntu 13.04Values
Screenshots
¹ On Ubuntu, the latest release of Opera is 12.16. Windows 7Values
Screenshots
Windows XPValues
Screenshots
@drublic to get the above data, I've written this simple page (I didn't bother with IE6-8 because the |
|
Nice work, @alrra! |
|
Yeah, nice research @alrra. But I don't think there is anything to "fix" here. It's standard behaviour for the disabled styles to be affected once you start to add your own styles to the default form elements. All it takes is for someone to do something like |
Agree. @drublic asked me in private to post whatever I've found regarding this, so here it is. button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
color: #808080;
}The above won't work for all browsers. E.g.: on iOS 6/7 the text inputs become almost invisible due to the fact that Safari uses A better way, that works relatively decent in all browsers, is: input:disabled,
textarea:disabled {
color: #404040;
opacity: .8;
}
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
optgroup:disabled, /* Only needed for Opera 12.16.*/
select:disabled {
color: #808080;
opacity: 1;
} Here is a test page, and the screenshots are below (first row: element --- second row: disabled element --- third row: disabled element with the above styles applied). Also, note that: using Android 4.1.2 (Samsung Galaxy S III)
¹ default Android browser iOS 7.0 (3rd generation iPad)
Mac OS X 10.8.4
Ubuntu 13.04
¹ On Ubuntu, the latest release of Opera is 12.16. Windows 7
Windows XP
|
Setting the color on form elements (e.g. button) also overwrites the disabled styles of the user agent: http://jsfiddle.net/rmHKu/1/
Therefore it is necessary to explicitly set the disabled style: http://jsfiddle.net/LfAUR/1/