最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css解决input里面光标位置靠上问题
时间：2022-06-25 11:15:25 编辑：袖梨 来源：一聚教程网
最近再做一个项目，发现input输入框内的光标有点怪异：不输入文字的时候，光标不处在input框的上下居中位置，而是偏上，当输入文字以后就变为正常了，开始我以为是浏览器的原因，但后来到各个浏览器查看一番，发现还真有点不同，于是百度了一下，找到了相关的文档读了读，才发现其中奥秘。
在Chrome浏览器中，当设置了line-height时，input无文字，光标高度与line-height一致；input有文字，光标高度从input顶部到文字底部。当没有设置line-height时，则是与font-size一致。
想让光标居中的解决方案是：让input的高度等于里面文字的高度，然后用padding把框撑起来，这样光标的高度和位置就固定了。
如：
input{
padding: 4px 0px;
font-size: 14px;
}
其实就是使用了padding来解决了，具体多少大家可以修改4px这个参数了调整了。
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21