占位符字体大小大于 16px

Posted 2023-03-05

【中文标题】占位符字体大小大于 16px

【英文标题】：Placeholder font-size bigger than 16px

【发布时间】：2015-09-04 03:39:42

【问题描述】：

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

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

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

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

【问题讨论】：

你能把你的代码放在 jsfiddle 上吗？

我无法重现此问题：jsfiddle.net/0tt4goj5 它适用于 Windows 7 上的最新 Chrome。

使字体大小和占位符字体大小相等。还要给他们添加line-heihgt。通常通过从字体大小增加 10px 来设置行高。例如：字体大小为 22 像素的 32 像素。

现在添加了一个 jsfiddle

FWIW 您的 JSFiddle 无法按预期工作，因为您忘记在 font-size: 20 声明中添加一个单元。

【参考方案1】：

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

input 
    width: 400px;
    padding: 0 20px;


input,
input::-webkit-input-placeholder 
    font-size: 20px;
    line-height: 3;

<input type="text" placeholder="My Cool Placeholder Text">

【讨论】：

很棒的提示，我在输入 css 中执行“20px！important”，在占位符 css 中执行“20px”，这就是为什么它不起作用所以这个答案的标题帮助我理解他们需要完全相同样式信息。

【参考方案2】：

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

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

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

【参考方案3】：

您必须在 CSS 中的占位符中添加“溢出：可见”以消除裁剪。

::placeholder
overflow: visible;

【参考方案4】：

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

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

目前（2019-04-29）有以下注意事项：

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

::-ms-input-placeholder 用于 Edge（也支持 webkit 前缀）

【参考方案5】：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！