3

我有<input />一个占位符。输入是自定义设计的，即它没有边框、没有轮廓、自定义高度、自定义宽度、自定义背景颜色、自定义文本颜色以及具有特定字体大小和行高的自定义字体。该字体是使用引用 *.ttf 文件的 @font-face 导入的。

问题在于，当专注于输入字段时，占位符文本会跳高约 2-3px，只是在模糊时跳回。

这里输入字段的定义：

@font-face{
    font-family: SourceSansProExtraLight;
    src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}

#search_input{

    background-color: #f0f0f0;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;

    width: 236px;
    padding-left: 12px;
    width: 224px; /* width (236) - padding-left */

    font-family: SourceSansProExtraLight;
    font-size: 30px;
    line-height: 30px;
    color: #5e5e5e;

    height: 52px;

}

这是一个演示该问题的 GIF：

占位符跳转

4

4 回答 4

3

请检查您是否为 input:focus 选择器编写了任何可能导致问题的 css。如果您没有为 input:focus 编写任何 css，请为此编写 css 以解决问题。

于 2013-04-25T07:19:46.753 回答
1

使用 input[type="text"] 没有问题。如果高度和行高相等，我只有 input[type="number"] 有问题：

input[type="number"] {
    height: 30px;
    line-height: 30px; 
}

但是如果我降低行高，效果就会消失：

input[type="number"] {
    height: 30px;
    line-height: 28px;
}
于 2015-09-09T09:05:12.527 回答
0

Chrome 为插入符号保留空间。

行的高度必须大于 1.11 个单位的字体高度（在我的系统上）。

例子：

font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
于 2015-10-18T17:57:44.497 回答
0

当outline-offset: 0输入有:focus. 这为我在 WebKit 上修复了跳跃占位符错误。我也在设置outline: none和展示一个 custom box-shadow，这可能是原因。

于 2016-01-21T20:56:38.293 回答