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/

Answer 1

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)

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 */

Answer 3

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">

Answer 4

The input and its placeholder must have matching font styles

input {
    width: 400px;
    padding: 0 20px;
}

input,
input::-webkit-input-placeholder {
    font-size: 20px;
    line-height: 3;
}

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

Answer 5

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

::placeholder{
overflow: visible;
}