Menu
I have a disabled input element that I am styling using the following CSS:
input[disabled='disabled'] {
color: #666;
}
This CSS works as expected in Firefox, but Chrome renders the text color several shades too light. If I set the color all the way to black #000000 Chrome renders it as a dark grey instead of black. The problem here is that the CSS produces the expected result in Firefox, but not in Chrome.
An example in JSFiddle which will showcase the discrepancy: http://jsfiddle.net/2AtGX/
How can I get this disabled input element to look the same in Firefox and Chrome?
659
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable. Tip: Disabled <input> elements in a form will not be submitted!
Approach: With adding basic CSS property we are able to change the font-color of a disabled input. The disabled input element is unusable and un-clickable. This is a boolean attribute. Here using the color property of input we can change the font-color of this disabled input element.
The disabled attribute is supported by <button> , <command> , <fieldset> , <keygen> , <optgroup> , <option> , <select> , <textarea> and <input> . This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls.
Please check this link for the answer:
How can I fully override Chromium disabled input field colours?
Short answer: set -webkit-text-fill-color: black
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
