The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Input placeholder text renders bolder than surrounding text

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #45508

    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?


    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.


    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)
  • The forum ‘CSS’ is closed to new topics and replies.