Disabled input text color

Question

The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).

In Firefox both border and text have the s

Answer 1

for @ryan

I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile.

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

Answer 2

You could change color to #440000 just for Safari, but IMHO the best solution would be not to change looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.

Answer 3

This question is very old but I thought that I would post an updated webkit solution. Just use the following CSS:

input::-webkit-input-placeholder {
  color: #880000;
}

Answer 4

Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */