I am experiencing difficulties to set the same text color for disabled input and select elements.
Example:
input:disabled,
select:disabled,
option:disabled {
color: #b8b8b8;
}<select disabled style="width: 50pt;">
<option>123</option>
</select><br>
<input disabled value="123" style="width: 45pt;">
Check this fiddle ...
How can be this fixed to get the same look, the same color being displayed?
Use Opacity:1.
fiddle to playaround.
input:disabled,
select:disabled,
option:disabled {
color: #b8b8b8;
opacity: 1;
}<select disabled style="width: 50pt;">
<option>123</option>
</select><br>
<input disabled value="123" style="width: 45pt;">The problem is when you use the attribute disable, the css property opacity: 0.7 is getting added to the styling.
Do the same with the input field also or You can override the css property of select tag with opacity:1 !important
to get the same styling for both the elements
input:disabled, select:disabled, option:disabled {
color: #b8b8b8;
opacity: 0.7;
}