提问人：mtm 提问时间：9/26/2023 更新时间：9/27/2023 访问量：47
输入占位符高度的 CSS
CSS for input placeholder height
问：
我有一个简单的嵌入式表单，在这里可见。我使用的字体在基线上的位置异常高，因此占位符文本（但不是用户输入）消失在其容器的边缘之外——像“电子邮件”末尾的“l”这样的高字母被切断了。
通常我会通过适当设置和/或调整属性来调整这样的东西，但由于这是一个占位符，似乎没有任何影响。line-heightoverflow
我可以看到用户代理样式表是这样做的：
input::placeholder {
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: hidden;
line-height: initial;
}
我无法用新的CSS规则覆盖它（即使使用！important规则）。我也猜这是有充分理由的。
有没有一种我不知道的最佳实践方法来处理这个问题？输入本身是足够的行高，但占位符 div 不会改变。
答：
0赞
ralph.m
9/26/2023
#1
尝试在样式表中更改为，如下所示：overflow-y: hidden;overflow-y: visible;
input::placeholder {
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: visible; /* new style */
line-height: initial;
}
这样做在我的测试中修复了它。
评论
0赞
mtm
9/26/2023
谢谢拉尔夫。有趣的是，它在您的测试中修复了它——根据我的问题，我已经在我的样式表中有了它，但它不会为我覆盖用户代理样式表。你做了什么样的测试？
0赞
ralph.m
9/27/2023
啊，太奇怪了。我通过 chrome 中的 Web 检查器插入样式表，效果很好。现在我无法复制它。对不起！我曾经工作得很好，但显然不是一个有用的解决方案。:-(
0赞
mtm
9/27/2023
很奇怪。感谢您的深入研究。不知何故，Gal 的答案找到了这些元素的组合，确实可以解决它，但它显然是敏感的。
0赞
ralph.m
9/27/2023
伟大！很高兴找到了解决方案。:-)
2赞
Gal Ratzkin
9/27/2023
#2
不能使用关键字重写样式，因为设置了属性的内联样式，或者因为有另一个样式标记为相同或优先。!important
不知道最佳实践或为什么这个特定的字体会溢出，但你可以将输入字段的溢出设置为可见，它会起作用。
就我而言，我添加了：在选择器中overflow: visible;input::placeholder
我在 main.css 的第 474 行做到了......
评论
0赞
mtm
9/27/2023
是的，就是这样。我使用了 overflow-y 和 line-height，但可能没有结合使用。这个小组合已经修好了，谢谢！
评论