Font color difference between placeholders between Firefox 23.0.1 Chrome 23.0.1271.64 and IE 8

Question

I changed the font color of the input field placeholder to blue, I tested it in Chrome, its color is blue. But in FF 23.0.1, color is a bit “lighter” than blue.

See contrast below, note that “Month” is within range, and the color is also blue:

In Chrome, this is great, see below:

However, in firefox 23.0.1 it looked like this:

In IE8 it does not display:

Pay attention to the color difference.

Below is the css code I'm using:

.month_span { color: blue; } .input::-webkit-input-placeholder { color:blue} .input::-moz-placeholder { color:blue; } /* FF 19+ */ .input:-moz-placeholder { color:#bbb; } /* FF 18- */ .input:-ms-input-placeholder { color:#bbb; } 

My question is: 1. Why is the color lighter in FF? 2. How to display placeholder value in IE?

Answer 1

The placeholder attribute is not supported by IE until IE 10, so this explains.

Firefox seems to apply opacity:0.54 text opacity:0.54 to placeholder text: http://css-tricks.com/snippets/css/style-placeholder-text/

This will fix:

 .input::-moz-placeholder { color:blue; opacity: 1; } /* FF 19+ */ .input:-moz-placeholder { color:#bbb; opacity: 1; } /* FF 18- */