Grow your CSS skills. Land your dream job.

Input placeholder text renders bolder than surrounding text

  • # June 13, 2013 at 12:26 pm

    I am working on a new site and have a design for a nice conversational contact form. It is supposed to read like a MadLib, with the input fields inline with the text, and the “conversation” helps people know what kind of information we expect in each field. The placeholders help as well… but I am having a nit-picky problem with the style.

    The page is here, and the contact form is at the bottom: http://dev.projectevolution.com/gunsho/#contact

    In Safari and Chrome, the text inside an input looks bolder and darker than the text outside. I’d love to get them to match.

    My rules for the placeholder are thus:

    &::-webkit-input-placeholder { color: #444; font-style: normal; }
    &::-moz-placeholder { color: #444; font-style: normal; opacity: 1; } /* Firefox 19 lowers the opacity of the placeholder to 0.54 by default */
    &:-ms-input-placeholder { color: #444; font-style: normal; }

    I remember something about how browsers will render text inside input fields differently than other text, and maybe `text-stroke` helped, but I also know that it doesn’t help anymore.

    Any other ideas out there?

    # June 13, 2013 at 12:52 pm

    The fix was simply to add `-webkit-font-smoothing: antialiased;`. I already have this rule present, but applied to `html`, so I neglected to think of it. One of the quirks of CSS/rendering engines is that applying a style to the `html` does not apply it all elements on the page.

    Thanks to [@skabob11](http://twitter.com/skabob11) on Twitter for the help.

    # June 12, 2014 at 7:31 am

    I just want to say thank you so much for posting your answer to this back last year. Been tearing my hair out over this for a few hours now then stumbled across this! Thanks so, so much.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".