调整input里面的输入光标大小

来自:互联网
时间:2018-08-14
阅读:

条件

input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够垂直居中。

问题

IE浏览器和火狐浏览器:不管该行有没有文字,光标高度与font-size一致。

360浏览器和谷歌浏览器:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决方案

把input的高度设置的跟文字大小相同,然后用padding去填充。

input{
height:16px;
line-height:16px;
padding:4px 0px;
font-size:12px;
}

好了,现在基本上可以解决所有浏览器的问题了。

返回顶部
顶部