css解决input里面光标位置靠上问题
来源:互联网 发布:2016nba季后赛数据 编辑:程序博客网 时间:2024/04/28 18:33
在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这个参数了调整了。(测试有效)
0 0
- css解决input里面光标位置靠上问题
- css解决input里面光标位置靠上问题
- CSS隐藏input光标
- IE8下input光标位置垂直不居中问题
- 设置input光标的位置
- 解决360下input文本框光标 上移的问题
- js获取textarea或者input光标位置,控制光标位置
- EditText的hint位置和光标位置靠右
- textview 光标位置问题
- 获取/设置input中的鼠标光标位置
- 纯CSS+DIV轻松解决对象在任何位置上水平对齐的问题
- 完美解决amzonui里面input和icon布局问题
- 【css】input文本框光标垂直不居中
- div contenteditable光标位置问题
- EditText中光标位置问题
- EditText设置光标位置问题
- EditText设置光标位置问题
- EditText中光标位置问题
- linux下的头文件 及C/C++头文件 一览表
- Composer加速镜像,一些小技巧
- C++ sizeof的使用总结
- leetcode | Swap Nodes in Pairs in a linklist
- 【Hadoop系列第五章】MapReduce2.0编程实践(上)理论
- css解决input里面光标位置靠上问题
- 类的扩展: 继承, 类目, 延展, 协议
- eclipse中经常用到的快捷键
- oracle 11g rac 在linux 6.3上安装的注意事项
- SQL server 2008的卸载
- C# 中的委托和事件
- HDU 1159 && POJ 1458
- 南阳 oj NYoj 动态规划 苹果
- C++智能指针与重载操作符