Make placeholder text look like input text in form field. Image attached

Question

I am trying to make the placeholder text look exactly like the actual text being entered into the form field.

The first field is showing placeholder text. Looks like gray text.

The second field is showing text entered into the field. Looks more black.

Here is the html code:

<p>Twitter Link</p>
<input type="text" placeholder="http://twitter.com" />

<p>Google+ Link</p>
<input type="text" placeholder="" />

and css code:

::-webkit-input-placeholder {color: #000;}
:-moz-input-placeholder     {color: #000;}
::-moz-input-placeholder    {color: #000;}
input::-moz-placeholder     {color: 000;}

I am mostly having trouble in firefox.

Answer 1

One problem is you forgot the hashtag(#) in front of the colorcode:

input::-moz-placeholder 
{color: 000;}

Since it was the lowest in the CSS, it probably was overriding the previous styles:

input::-moz-placeholder 
{color: #000;}

Also, it seems for placeholders, there are quite a bit of CSS to make it cross browser:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #000;
}

Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.

_{This code and quote comes from this excellent SO answer}

JSFiddle Demo

Answer 2

Try this:

HTML:

<input type="text" placeholder="http://twitter.com" />

CSS:

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

Here is a jsfiddle with above codes: https://jsfiddle.net/e0d8my79/49/