占位符字体大小大于16像素

Question

我已经阅读了几篇有关在HTML5中使用::-webkit-input-placeholder来样式化输入字段占位符的文章。它完美地工作，除了一个问题。

如果我尝试将字体大小增加到大于16px的值，文本就会在底部“被裁剪”。这无论输入本身的高度和填充如何都会发生。是否有人知道避免此问题的方法，可以使用纯CSS或JavaScript？

我添加了两个输入字段的截图，其中占位符的字体大小为20px。

Jsfiddle: https://jsfiddle.net/bvwdg86x/

- Valdemar Edvard Sandal Rolfsen

---

你能把你的代码放到JSFiddle或其他类似的网站上吗？ - Aakash Aggarwal

我无法重现这个问题：http://jsfiddle.net/0tt4goj5/ 它在Windows 7上的最新Chrome上运行正常。 - KittMedia

使字体大小和占位符字体大小相等。同时将line-height添加到它们中。通常通过从字体大小增加10px来设置行高。例如：32px对于22px的字体大小。 - Nanang Mahdaen El-Agung

现在添加了一个 jsfiddle。 - Valdemar Edvard Sandal Rolfsen

就你的JSFiddle而言，它无法正常工作是因为你忘记在“font-size: 20”声明中添加单位了。 - gfullam

Answer 1

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

input {
    display: block;
    width: 50vw;
    padding: 0 1.25rem;
}

input,
input::placeholder {
    font: 1.25rem/3 sans-serif;
}

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

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

问题中包含的截图显示占位符值被用作标签。这种技术可能对辅助技术用户不利，被认为是一种可访问性反模式。

来自W3C › WAI › Placeholder Research › Avoid use of placeholder values：

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

另请参阅：

• 不要使用占位符属性 - Smashing Magazine
• 表单字段中的占位符是有害的 - Nielsen Norman Group
• 占位符属性不是标签！- Web Axe
• 将占位符用作标签是否符合WCAG 2？- Stack Overflow

- gfullam

---

非常棒的提示，我在输入CSS中使用了“20px！important”，而在占位符CSS中使用了“20px”，这就是为什么它不起作用的原因，所以这个答案的标题帮助我理解它们需要具有完全相同的样式信息。 - Mr Megamind

Answer 2

占位符样式不会调整输入字段的大小，也不会影响其框模型。将字体大小添加到输入框中可以修复占位符被截断的问题。

您还可以考虑为其他浏览器添加占位符样式...

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

- Dave O'Brien

Answer 3

你需要在你的CSS中为占位符添加"overflow: visible"，以消除裁剪。

::placeholder{
overflow: visible;
}

- Mohammed Zaid

Answer 4

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

- imnik18

---

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。请尽量不要在代码中添加过多的解释性注释，这会降低代码和解释的可读性！ - Filnor

Answer 5

与此同时，浏览器厂商实现了::placeholder CSS 伪元素。

您可以在caniuse.com上找到当前浏览器兼容性的状态。

目前（2019年4月29日），有以下注释：

对于Chrome / Safari / Opera，使用::-webkit-input-placeholder（Chrome issue＃623345）

对于Edge，使用::-ms-input-placeholder（还支持webkit前缀）

- ˈvɔlə