A5下载站:努力做内容最丰富最安全的下载站! 网站地图最新更新下载排行专题软件发布

热门软件

地铁跑酷

冒险迷岛

全民迷宫

连连消大作战

小河狸创客

阿里健康医鹿

支付宝app

番薯小说

MOMO陌陌

虾米音乐app

位置导航:A5下载 > 源码技巧 > 父类数据

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

时间:2015-03-26 10:37来源:a5源码作者:zhao浏览:158
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,chrome下光标跟input的height一样高,……

input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,chrome下光标跟input的height一样高,而IE下光标跟文字的大小一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部,如果没有line-height,则是与font-size一致。

现在就介绍下网上总结出的解决的方案如下:

给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input{

height: 16px;

line-height: 16px;

padding: 4px 0px;

font-size: 12px;

}