占位符字体大小大于 16px

Question

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

如果我尝试将字体大小增加到高于 16px 的值，文本会在底部被“剪切”。无论输入本身的高度和填充如何，都会发生这种情况。有谁知道使用纯 CSS 或 javascript 来避免这个问题的方法吗？

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

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

原文由 Valdemar Edvard Sandal Rolfsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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 属性不应用作标签的替代。占位符是一个简短的提示，旨在帮助用户输入数据，因此它不应与标签元素相同。辅助技术可能无法使用占位符，因此可能无法依赖它来传达可访问的名称或描述——它的作用类似于后备内容。

也可以看看：

• 不要使用占位符属性 - Smashing Magazine
• 表单字段中的占位符是有害的 - Nielsen Norman Group
• 占位符属性不是标签！ - 网斧

奖金：

• 这个 Stack Overflow 对问题 “使用占位符作为标签是否符合 WCAG 2？”的 彻底回答

原文由 gfullam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Dave O‘Brien 发布，翻译遵循 CC BY-SA 3.0 许可协议