Placeholder font-size bigger than 16px

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

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

The input and its placeholder must have matching font styles

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

input,
input::placeholder {
    font: 20px/3 sans-serif;
}
<input type="text" placeholder="Example Input">

A note about placeholder accessibility

The screenshot included in the question shows the placeholder values being used as labels. This technique may be problematic for users of assistive technology and is considered an accessibility anti-pattern.

From W3C › WAI › Placeholder Research › Avoid use of placeholder values:

A placeholder attribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description -- it acts similar to fallback content.

See also:

  • Don't Use The Placeholder Attribute - Smashing Magazine
  • Placeholders in Form Fields Are Harmful - Nielsen Norman Group
  • Placeholder Attribute Is Not A Label! - Web Axe

Bonus:

  • This thorough Stack Overflow answer to the question "Does using a placeholder as a label comply with WCAG 2?"

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

::placeholder{
overflow: visible;
}