Menu
I changed the placeholder font color of an input field to blue, I've tested it in Chrome, it's color is blue. But in FF 23.0.1, the color is slightly "lighter" than blue.
See the contrast below, note the "Month" is within a span and color is also blue:
In Chrome, it's fine, see below:
However, in firefox 23.0.1, looked like this:
In IE8, not display:
Note the difference of the color.
Below is the css code I am 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:1. Why the color is lighter in FF? 2. How to display placeholder value in IE?
642
In most browsers, the placeholder text is grey.
CSS ::placeholder Selector The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field. Tip: The default color of the placeholder text is light grey in most browsers.
Use the ::placeholder pseudo-element to style your placeholder text in an <input> or <textarea> form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.
Placeholder styles will not resize an input field and will not affect its box model. Add font-size to your input to fix the placeholder from getting cut off. You also might consider adding placeholder styles for other browsers... Save this answer.
The placeholder attribute isn't supported by IE until IE 10, so that explains that.
Firefox apparently applies opacity:0.54 to the 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- */
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
