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/

edited Jun 18 '15 at 13:21

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

Can you put your code on jsfiddle or something?

– Aakash Aggarwal
Jun 18 '15 at 13:15

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

– KittMedia
Jun 18 '15 at 13:19

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.

– Nanang Mahdaen El-Agung
Jun 18 '15 at 13:23

Added a jsfiddle now

– Valdemar Edvard Sandal Rolfsen
Jun 18 '15 at 13:24

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

– gfullam
Jun 18 '15 at 13:33

add a comment |

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.

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/

edited Jun 18 '15 at 13:21

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

Can you put your code on jsfiddle or something?

– Aakash Aggarwal
Jun 18 '15 at 13:15

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

– KittMedia
Jun 18 '15 at 13:19

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.

– Nanang Mahdaen El-Agung
Jun 18 '15 at 13:23

Added a jsfiddle now

– Valdemar Edvard Sandal Rolfsen
Jun 18 '15 at 13:24

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

– gfullam
Jun 18 '15 at 13:33

add a comment |

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.

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/

edited Jun 18 '15 at 13:21

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

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.

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/

css html5 placeholder

edited Jun 18 '15 at 13:21

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

edited Jun 18 '15 at 13:21

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

edited Jun 18 '15 at 13:21

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

asked Jun 18 '15 at 13:15

Valdemar Edvard Sandal Rolfsen

4792919

Can you put your code on jsfiddle or something?

– Aakash Aggarwal
Jun 18 '15 at 13:15

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

– KittMedia
Jun 18 '15 at 13:19

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.

– Nanang Mahdaen El-Agung
Jun 18 '15 at 13:23

Added a jsfiddle now

– Valdemar Edvard Sandal Rolfsen
Jun 18 '15 at 13:24

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

– gfullam
Jun 18 '15 at 13:33

add a comment |

Can you put your code on jsfiddle or something?

– Aakash Aggarwal
Jun 18 '15 at 13:15

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

– KittMedia
Jun 18 '15 at 13:19

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.

– Nanang Mahdaen El-Agung
Jun 18 '15 at 13:23

Added a jsfiddle now

– Valdemar Edvard Sandal Rolfsen
Jun 18 '15 at 13:24

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

– gfullam
Jun 18 '15 at 13:33

Can you put your code on jsfiddle or something?

– Aakash Aggarwal
Jun 18 '15 at 13:15

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

– KittMedia
Jun 18 '15 at 13:19

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.

– Nanang Mahdaen El-Agung
Jun 18 '15 at 13:23

Added a jsfiddle now

– Valdemar Edvard Sandal Rolfsen
Jun 18 '15 at 13:24

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

– gfullam
Jun 18 '15 at 13:33

add a comment |

3 Answers
3

active

oldest

votes

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

edited Feb 5 '18 at 16:53

answered Jun 18 '15 at 13:29

gfullam

5,60523551

1

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.

– Mr Megamind
Sep 27 '16 at 10:01

add a comment |

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

edited Jun 18 '15 at 14:03

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

add a comment |

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

answered Nov 20 '18 at 12:17

imnik18

167

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!

– Filnor
Nov 20 '18 at 12:38

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f30916387%2fplaceholder-font-size-bigger-than-16px%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

edited Feb 5 '18 at 16:53

answered Jun 18 '15 at 13:29

gfullam

5,60523551

1

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.

– Mr Megamind
Sep 27 '16 at 10:01

add a comment |

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

edited Feb 5 '18 at 16:53

answered Jun 18 '15 at 13:29

gfullam

5,60523551

1

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.

– Mr Megamind
Sep 27 '16 at 10:01

add a comment |

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

edited Feb 5 '18 at 16:53

answered Jun 18 '15 at 13:29

gfullam

5,60523551

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

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

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

edited Feb 5 '18 at 16:53

answered Jun 18 '15 at 13:29

gfullam

5,60523551

edited Feb 5 '18 at 16:53

answered Jun 18 '15 at 13:29

gfullam

5,60523551

answered Jun 18 '15 at 13:29

gfullam

5,60523551

answered Jun 18 '15 at 13:29

gfullam

5,60523551

1

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.

– Mr Megamind
Sep 27 '16 at 10:01

add a comment |

1

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.

– Mr Megamind
Sep 27 '16 at 10:01

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.

– Mr Megamind
Sep 27 '16 at 10:01

add a comment |

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

edited Jun 18 '15 at 14:03

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

add a comment |

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

edited Jun 18 '15 at 14:03

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

add a comment |

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

edited Jun 18 '15 at 14:03

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

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

edited Jun 18 '15 at 14:03

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

edited Jun 18 '15 at 14:03

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

answered Jun 18 '15 at 13:41

Dave O'Brien

1064

add a comment |

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

answered Nov 20 '18 at 12:17

imnik18

167

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!

– Filnor
Nov 20 '18 at 12:38

add a comment |

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

answered Nov 20 '18 at 12:17

imnik18

167

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!

– Filnor
Nov 20 '18 at 12:38

add a comment |

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

answered Nov 20 '18 at 12:17

imnik18

167

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

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

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

answered Nov 20 '18 at 12:17

imnik18

167

answered Nov 20 '18 at 12:17

imnik18

167

answered Nov 20 '18 at 12:17

imnik18

167

answered Nov 20 '18 at 12:17

imnik18

167

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!

– Filnor
Nov 20 '18 at 12:38

add a comment |

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!

– Filnor
Nov 20 '18 at 12:38

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!

– Filnor
Nov 20 '18 at 12:38

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk