Placeholder font-size bigger than 16px

Question

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

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

Hash

Can you put your code on jsfiddle or something? – Statistical

I can't reproduce this problem: jsfiddle.net/0tt4goj5 It works on the latest Chrome on Windows 7. – Griefstricken

Makes the font-size and placeholder font-size equal. Also add line-heihgt to them. Usually set line-height by increase 10px from the font-size. E.g: 32px fro font-size 22px. – Sack

Added a jsfiddle now – Hash

FWIW Your JSFiddle doesn't work as expected because you forgot to add a unit to the font-size: 20 declaration. – Spherulite

Answer 1

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:

• Don't Use The Placeholder Attribute - Smashing Magazine
• Placeholders in Form Fields Are Harmful - Nielsen Norman Group
• Placeholder Attribute Is Not A Label! - Web Axe
• Does using a placeholder as a label comply with WCAG 2? - Stack Overflow

Spherulite

Awesome tip, I was doing "20px!important" in input css and "20px" in placeholder css thats why it was not working so the heading of this answer helped me understand they need to have exactly same style information. – Thundercloud

Answer 2

Placeholder styles will not resize an input field and will not affect its box model. Add font-size to your input to fix the placeholder from getting cut off.

You also might consider adding placeholder styles for other browsers...

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */

Clothe

Answer 3

You have to add 'overflow: visible' to the placeholder in your css to get rid of the cropping.

::placeholder{
overflow: visible;
}

Propitiatory

Answer 4

input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}

<input type="text" placeholder="My Cool Placeholder Text">

Supersession

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Telespectroscope

Answer 5

Meanwhile, the browser vendors implemented the ::placeholder CSS pseudo-element.

You can find the current state of browser compatibility on caniuse.com.

Currently (2019-04-29) there are following notes:

::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345)

::-ms-input-placeholder for Edge (also supports webkit prefix)

Terle