输入及其占位符必须具有匹配的字体样式

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

input,
input::placeholder {
    font: 20px/3 sans-serif;
}

<input type="text" placeholder="Example Input">

关于占位符可访问性的说明

问题中包含的屏幕截图显示占位符值被用作标签。此技术可能会给辅助技术用户带来问题，并被视为可访问性反模式。

• 摘自W3C › WAI ›占位符研究›避免使用占位符值 *：

placeholder属性不应用作标签的替代项。占位符是一个简短的提示，旨在帮助用户输入数据，因此不应与标签元素相同。占位符可能不可用于辅助技术，因此不能依赖它来传达可访问的名称或说明-它的作用类似于回退内容。
另见：

• 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
• Does using a placeholder as a label comply with WCAG 2? - Stack Overflow

占位符样式不会调整输入字段的大小，也不会影响其框模型。请在输入中添加字体大小以修复占位符，防止其被截断。
您也可以考虑为其他浏览器添加占位符样式...

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */

您必须添加“溢出：visible'到css中的占位符以消除裁剪。

::placeholder{
overflow: visible;
}

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 CSS伪元素。
您可以在caniuse.com上找到浏览器兼容性的当前状态。
目前（2019-04-29）有以下注解：
：：-网页工具包输入-Chrome/Safari/Opera浏览器的占位符（Chrome issue #623345）
：：-ms-input-Edge的占位符（也支持webkit前缀）