占位符字体大小大于 16px

Question

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

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

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

Answer 1

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

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

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

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

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

问题中包含的屏幕截图显示了用作标签的占位符值。这种技术对于辅助技术的用户来说可能会有问题，并且被认为是可访问性反模式。

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.

另请参阅：

奖金：

这个 Stack Overflow 对问题

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

目前（2019-04-29）有以下注释：

::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345)

::-ms-input-placeholder for Edge (also supports webkit prefix)

Answer 5

您必须将 'overflow: visible' 添加到 css 中的占位符才能取消裁剪。

::placeholder{
overflow: visible;
}

占位符字体大小大于 16px

Placeholder font-size bigger than 16px

html

css

placeholder

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

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