Safari and Chrome on Mac and iOS didn't apply color for disabled and readonly inputs
Created by: ihorzenich
Safari and Chrome on Mac and iOS didn't apply color for readonly and disabled inputs, they use internal -webkit-text-fill-color
property instead of color
, so you can't customize text color for disabled/readonly inputs.
Because we already have styles for fixing browser inconsistencies for form-colntrols like
- placeholder color in Firefox: https://github.com/twbs/bootstrap/blob/master/scss/forms/_form-control.scss#L43
- and iOS disabled/readonly color: https://github.com/twbs/bootstrap/blob/master/scss/forms/_form-control.scss#L56
it seems legit to add correspondent styles to fix the same issues for Chrome/Safari on MacOS/iOS.
It could be fixed by:
.form-control {
...
&:disabled,
&[readonly] {
-webkit-text-fill-color: currentColor;
}
}