See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
Thanks but I already read that link and it doesn’t mention how to style the placeholder text. I’ve read many other articles that DO discuss placeholder text, but they all suggested something like the code I pasted above, which doesn’t work. Any other advice? You can see the text I’m referring to here:
http://advocatestaffing.com/dev/other-inquiries/
That code works on my site… My guess is you have something else overriding it in your CSS.
Sorry that’s not really helpful, but in a backwards way it might be. If you have a site we can see, I might be able to help pinpoint the conflict with you.
Here (also was posted above) — http://advocatestaffing.com/dev/other-inquiries/
Thanks for any help!
Sorry I missed your site the first time!
I went in and played around. It looks like you just need to add the !important CSS tag because something else is getting priority.
::-webkit-input-placeholder { /* WebKit browsers */
color: #000 !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000 !important;
opacity: 1;
}
Doing so, I was able to change the placeholder font to blue or whatever color I wanted, just on my end of course. 😉
I hope this works for you too!
THANK YOU! Worked great!!
You’re welcome! =)
P.S. Don’t forget to mark the topic as resolved in the right-hand column.
Thanks for this post! This issue got me nuts for about 20 minutes!
Im having the same issue, but for some reason when I visit the page with Firefox the placeholder font is white and thin, and when i open it with chrome the placeholder font is gray and thick??? Please HELP 🙁
