占位符字体大小超过16像素 [英] Placeholder font-size bigger than 16px
问题描述
我已经阅读了几篇关于使用HTML5中的 :: - webkit-input-placeholder
为输入字段的占位符设置样式的文章。除了一件事之外它完美地工作。
I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholder
in HTML5. It works perfectly, except for one thing.
如果我尝试将字体大小增加到高于16px的值,则文本在底部被剪切。无论输入本身的高度和填充如何,都会发生这种情况。有没有人知道一种避免这个问题的方法,使用纯CSS或javascript?
If I try to increase the font-size to a value higher than 16px, the text gets "cut" at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?
我添加了两个输入字段的屏幕截图,其中占位符的字体大小为20px
I have added a screenshot of two inputfields where the placeholders have an font-size of 20px
Jsfiddle: https://jsfiddle.net/bvwdg86x/
Jsfiddle: https://jsfiddle.net/bvwdg86x/
推荐答案
输入及其占位符必须具有匹配的字体样式
The input and its placeholder must have matching font styles
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">
这篇关于占位符字体大小超过16像素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!