css – 占位符字体大小超过16px

前端之家收集整理的这篇文章主要介绍了css – 占位符字体大小超过16px前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经阅读了几篇关于在HTML5中使用:: – webkit-input-placeholder设置输入字段占位符的文章.它完美无缺,除了一件事.

如果我尝试将font-size增加到高于16px的值,则文本会在底部“剪切”.无论输入本身的高度和填充如何,都会发生这种情况.有没有人知道一种避免这个问题的方法,使用纯CSS还是javascript?

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

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

解决方法

输入及其占位符必须具有匹配的字体样式
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相关文章