最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css解决input里面光标位置靠上问题
时间:2015-03-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这个参数了调整了。
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26