input输入时光标位置靠上问题解决

在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了,在Chrome浏览器中,当设置了line-height时,input无文字,光标高度与line-height一致;input有文字,光标高度从input顶部到文字底部。当没有设置line-height时,则是与font-size一致。

想让光标居中的解决方案是:让input的高度等于里面文字的高度,然后用padding把框撑起来,这样光标的高度和位置就固定了。

如:

input{
    height: 14px;
    padding: 4px 0px;
    font-size: 14px;
}

posted @ 2016-12-02 16:26  王永峰的博客  阅读(6095)  评论(0编辑  收藏  举报