Change input placeholder color darker

Question

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.

score 58 · Accepted Answer · answered Mar 23 '13 at 11:53

58

I've found you need to override opacity.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    red;
     opacity: 1 !important;
}

answered Mar 23 '13 at 11:53

Doug

649
6
4

gnarly, i didn't notice Chrome hanging on to the opacity! – Timothy Groote Oct 28 '13 at 09:48
1

now your only change the color for webkit browsers ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } – Ivo Nov 29 '13 at 00:09
9

This answer should set the opacity in `::-moz-placeholder {}` since *Firefox* is the browser with the lower opacity. – Mottie Feb 10 '14 at 19:39

Timothy Groote · Answer 2 · 2016-12-15T09:11:56.017

22

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;
}

edited Dec 15 '16 at 09:11

answered Mar 19 '13 at 11:00

Timothy Groote

8,614
26
52

1

This answer should set the opacity in `::-moz-placeholder {}` since *Firefox* is the browser with the lower opacity. – Mottie Feb 10 '14 at 19:40

score -3 · Answer 3 · answered Mar 19 '13 at 10:59

-3

Input a hexidecimal value for the color.

Maybe use a tool like http://www.colorpicker.com/ ?

answered Mar 19 '13 at 10:59

Sami N

1,170
2
9
21

Nikunj Jagad · Answer 4 · 2013-03-19T11:11:39.803

-4

visit: http://www.w3schools.com/html/html_colors.asp

<html>
<head>
<style type="text/css">

    input, textarea { color: #000; }
    .placeholder { color: #aaa; }
</style>
</head>
<body>
<form action="" method="post">

            <input type="text" name="user" placeholder="enter a text" />
            <input type="submit" value="submit" onclick="test()" />
</form>

in the place of color code you can write which ever color you want

edited Mar 19 '13 at 11:11

answered Mar 19 '13 at 11:03

Nikunj Jagad

23
5

CSS class selectors have nothing to do with HTML attributes :) – Valerio Bozz Dec 12 '17 at 09:58

Change input placeholder color darker

4 Answers4

Linked