Strange problem with font color in a text input placeholder text

HTML & CSS
1

http://mayacove.com/dev/misc/form_test.html

the boxes (which are text boxes with placeholder) should be color:#eee, instead I’m getting #666…

for the second row of text boxes, just for testing, I set at the text color at red, which works fine, but when I set it to either #eee or #fff I get #666…

WTF??

( color:#eee is working fine also for the checkbox labels… don’t get what prob is for the text boxes…)

would appreciate suggestions…

thank you…

2

Are u using the placeholder css prefix?

example:

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

:-moz-placeholder { /* Firefox 18- */
   color: #eee;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #eee;
}

:-ms-input-placeholder {
   color: #eee;
}
3

Yes, it looks like you are confusing the color of the placeholder text (set by default by the browser) and the actual input text. To color the placeholder text, try ReGGaeBOSS’ suggestion.

4

thank you Ralph…

yes I discovered this…

it-input-placeholder { color:#fff; }
::-moz-placeholder { color:#fff; } /* firefox 19+ */
:-ms-input-placeholder { color:#fff; } /* ie */
input:-moz-placeholder { color:#fff; }

but even if I set it to white the placeholder text is darker…
http://mayacove.com/dev/misc/form_test.html

:frowning:

5

Your CSS isn’t valid, you should have the same thing that ReGGaeBOSS posted apart from the colour being different.

6

really?

I got it from here,

ok, copied code ReGGaeBOSS posted… this is my code now…


::-webkit-input-placeholder {   color: #eee;}
:-moz-placeholder {color: #eee;    }
::-moz-placeholder {    color: #eee;  }
:-ms-input-placeholder {     color: #eee;  }

it’s still not working…:frowning:
http://mayacove.com/dev/misc/form_test.html

thank you…

7

Its working fine for me in Chrome now, also when I said your CSS was invalid I was referring to what you had posted above and what was in your page source, in were missing the webk from the WebKit placeholder selector.

8

yep… it’s working now in Chrome… thank you…

(but not FF… :frowning: )

thank you…

9

Didn’t you want your place-holder text to be white not grey? Currently its #eee which is the opposite to what you originally had above.