Placeholder font-size bigger than 16px

css html placeholder
Valdemar Edvard Sandal Rolfsen picture Valdemar Edvard Sandal Rolfsen · Jun 18, 2015 · Viewed 93.2k times · Source

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/

Answer

gfullam picture gfullam · Jun 18, 2015

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

Related questions

Change an HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too). But the following CSS doesn't do anything to the placeholder's value: Value will still remain grey instead of red. Is there a way to change the …

Read More
How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
How do I auto-hide placeholder text upon focus using css or jquery?

This is done automatically for every browser except Chrome. I'm guessing I have to specifically target Chrome. Any solutions? If not with CSS, then with jQuery? Kind regards.

Read More