Why is text in disabled form elements not rendered

问题:

I am trying to get the text inside disabled input elements to show up in black. This works in most browsers:

input[type="text"][disabled],
input[type="text"]:disabled {
  color: #000000;
}

In Safari (version 6.0.2), however, the text is slightly brighter. What puzzles me most is that when I select the text in my browser and look up the element information on my console it clearly shows:

rgba(0,0,0)

So in the code it is black but nonetheless it is rendered in something other than black. How is this possible?

Is this a Safari bug?

Thanks for any help in this matter.

回答1:

Try:

-webkit-text-fill-color: #000000;

This worked in Safari 7.

回答2:

This is odd indeed. It seems that Safari shows the exact color black as gray in a disabled field, whereas other colors are obeyed. As a workaround, you could set color: #000001, but it isn’t quite black of course but has a shade of blue.

As a different approach, consider why a field is set to disabled state, yet should be displayed in normal black color. For example, display it in normal text (and turn it to normal input field when you would now make the disabled field enabled).