Search code examples
csshtmlplaceholder

Placeholder font-size bigger than 16px

I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholder in HTML5. It works perfectly, except for one thing.

If I try to increase the font-size to a value higher than 16px, the text gets "cut" at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?

I have added a screenshot of two inputfields where the placeholders have an font-size of 20px

enter image description here

Jsfiddle: https://jsfiddle.net/bvwdg86x/

Solution

  • The input and its placeholder must have matching font styles

    input {
    display: block;
    width: 50vw;
    padding: 0 1.25rem;
}

input,
input::placeholder {
    font: 1.25rem/3 sans-serif;
}
    <input type="text" placeholder="Example Input" />

    A note about placeholder accessibility

    The screenshot included in the question shows the placeholder values being used as labels. This technique may be problematic for users of assistive technology and is considered an accessibility anti-pattern.

    From W3C › WAI › Placeholder Research › Avoid use of placeholder values:

    A placeholder attribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description -- it acts similar to fallback content.

    See also: