Forums

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
    Posts
  • #45508
    artinruins
    Participant

    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?

    #138611
    artinruins
    Participant

    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.

    #172598
    tristanb
    Participant

    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.