Placeholder font-size bigger than 16px
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">
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 */