Change input placeholder color darker
Solution 1
I've found you need to override opacity.
::-webkit-input-placeholder { /* WebKit browsers */
color: red;
opacity: 1 !important;
}
Solution 2
Yes, by setting its value through HEX (hexadecimal) you get better control of what color to use.
The color for bright red (as red as it gets) is #FF0000
Firefox, however is a rebel needs to be told what opacity to use.
For reference take a look at this chart
::-webkit-input-placeholder {
color: #FF0000;
opacity: 1 !important; /* for older chrome versions. may no longer apply. */
}
:-moz-placeholder { /* Firefox 18- */
color: #FF0000;
opacity: 1 !important;
}
::-moz-placeholder { /* Firefox 19+ */
color: #FF0000;
opacity: 1 !important;
}
:-ms-input-placeholder {
color: #FF0000;
}
Phuc Pham
Updated on August 04, 2022Comments
-
Phuc Pham almost 2 years
Follow this article (Style text input placeholder), i can change the color of the text input placeholder to red color. But it is always a light-red color, not red exactly.
Is there any way to make it a red color exactly?
update
The color on Chrome is red (this is correct), the color on Firefox is not red, it is light-red or blurred, i guessed that.
EDIT (from the OP answer):
Please check this example (http://jsfiddle.net/LQkQG/), the color is red on Chrome, but
light-red
on Firefox. I want the color on Firefox same with the Chrome.