占位符字体大小超过16像素

Question

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

如果我尝试将font-size增加到高于16px的值，则文本会被＆＃34; cut＆＃34;在底部。无论输入本身的高度和填充如何，都会发生这种情况。有没有人知道如何使用纯CSS或javascript来避免这个问题？

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

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

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

Answer 2

占位符样式不会调整输入字段的大小，也不会影响其框模型。在输入中添加font-size以修复占位符被截止。

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

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

Answer 3

s3fs your_bucketname /mys3bucket -o use_cache=/tmp -o allow_other -o uid=1001 -o mp_umask=002 -o multireq_max=5 -o use_path_request_style -o url=https://s3-{{aws_region}}.amazonaws.com

input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}

Answer 4

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

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

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

  

::-webkit-input-placeholder for Chrome / Safari / Opera（Chrome issue #623345）

     

::-ms-input-placeholder for Edge（还支持webkit前缀）

Answer 5

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

::placeholder{
overflow: visible;
}