CODEWITHSUNDEEP
htmlcss
kimberlyvoo
kimberlyvoo

Reputation: 197

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

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.

Upvotes: 1

Views: 919

Answers (2)

Jacob G
Jacob G

Reputation: 14172

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

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16331

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/

Upvotes: 0

Related Questions