CSS Question

Placeholder font-size bigger than 16px

I have read a couple of articles about styling the placeholder of an input field using

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/

Answer Source

The input and its placeholder must have matching font styles

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

input::-webkit-input-placeholder {
    font-size: 20px;
    line-height: 3;
<input type="text" placeholder="This gets cut">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download