Placeholder text color

  • Resolved cmeurer

    (@cmeurer)


    10 years, 1 month ago

    I have read many forums and blogs about how to change the placeholder text color in from the light gray default to something else and NONE of it works! I have added to my child theme’s stylesheet every iteration of the CSS below and the placeholder text is still too light for my taste. I would like it to be darker gray or black. It should be so simple! PLEASE HELP!

    ::-webkit-input-placeholder { /* WebKit browsers */
    color: #000;
    opacity: 1;
    }

    :-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;
    opacity: 1;
    }

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 10 replies - 1 through 10 (of 10 total)

  • 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.

    Thread Starter cmeurer

    (@cmeurer)

    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:
    https://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.

    Thread Starter cmeurer

    (@cmeurer)

    Here (also was posted above) — https://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!

    Thread Starter cmeurer

    (@cmeurer)

    THANK YOU! Worked great!!

    You’re welcome! =)

    P.S. Don’t forget to mark the topic as resolved in the right-hand column.

    Thread Starter cmeurer

    (@cmeurer)

    Done!

    Jeroen

    (@jeroenonstenk)

    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 ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Placeholder text color’ is closed to new replies.