css解决input里面光标位置靠上问题

78 阅读 0 评论 52 点赞

我是靠谱客的博主大力朋友，最近开发中收集的这篇文章主要介绍css解决input里面光标位置靠上问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了，那么我们要如何解决此问题，下面一起和小编来看看吧。

最近再做一个项目，发现input输入框内的光标有点怪异：不输入文字的时候，光标不处在input框的上下居中位置，而是偏上，当输入文字以后就变为正常了，开始我以为是浏览器的原因，但后来到各个浏览器查看一番，发现还真有点不同，于是百度了一下，找到了相关的文档读了读，才发现其中奥秘。

在Chrome浏览器中，当设置了line-height时，input无文字，光标高度与line-height一致；input有文字，光标高度从input顶部到文字底部。当没有设置line-height时，则是与font-size一致。

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

如：

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

其实就是使用了padding来解决了，具体多少大家可以修改4px这个参数了调整了。（测试有效）

以上就是大力朋友为你收集整理的css解决input里面光标位置靠上问题的全部内容，希望文章能够帮你解决css解决input里面光标位置靠上问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。