The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    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]( 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed