关于调整input里面的输入光标大小
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,
在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,
chrome下光标跟input的height一样高,
而IE下光标跟文字的大小一致。
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,
在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,
chrome下光标跟input的height一样高,
而IE下光标跟文字的大小一致。
一直没弄明白为什么这样子,后来才知道原因所在。
初步结论如下:
IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。
解决的方案:
给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题
input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}
关于调整input里面的输入光标大小的更多相关文章
- chrome、firefox、IE中input输入光标位置错位解决方案
以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...
- input光标大小
最近在做项目忘记密码页面时,input光标大小需要统一.同时也需要兼容ie8浏览器. 总结如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font- ...
- Demo 示例控制输入光标位置
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...
- input文字颜色、光标颜色
<input type="text" placeholder="输入框"> input{ color: red;/*输入文字.光标颜色*/ -web ...
- 使用iScroll时,input等不能输入内容的解决方法
做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...
- 使用iScroll时,input等不能输入内容的解决方法(share)
最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...
- javascript限制input只允许输入数字
在做数据提交的表单时,经常要对input输入内容的类型进行限制,譬如javascript限制input只允许输入数字,最好的方法当然是使用javascript,因为它不用与服务器交互,大大减轻了服务器 ...
- 使用 onpropertychange 和 oninput 检测 input、textarea输入改变
检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...
- html input验证只能输入数字,不能输入其他
html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...
随机推荐
- 一台主机上安装多个Tomcat
1. 下载解压版的Tomcat,并解压两次,分别命名为Tomcat_Server_01和Tomcat_Server_02: 2. 进入Tomcat_Server_01\bin目录,编辑service文 ...
- ABP 初探 之User、Role、Permission数据库设计 (EntityFramework 继承的另一种使用方法)
最近群里(134710707)的朋友都在讨论ABP源码,我把最近学习的内容记录下来,同时也分享给大家,希望正在研究ABP源码的朋友有一定帮助. 上篇介绍ABP的多语言,本篇主要介绍权限的数据库设计,用 ...
- JavaScript高阶函数
所谓高阶函数(higher-order function) 就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数. 下面的例子接收两个函数f()和g(),并返回一个新的函数用以计算f(g ...
- 从头开始搭建分布式日志平台的docker环境
上篇(spring mvc+ELK从头开始搭建日志平台)分享了从头开始搭建基于spring mvc+redis+logback+logstash+elasticsearch+kibana的分布式日志平 ...
- Ajax传递路径问题及解决
在使用Ajax的过程中,如果要通过JSON传递路径值到处理页面,可能会出现传值不正确.(李昌辉) 解决方法就是在传值之前将路径进行编码: JS中: encodeURIComponent(url); 在 ...
- js严格模式总结
首先,我们要理解严格模式的概念,严格模式是一种特殊的执行模式,它修复了部分语言上的不足,提供更强的错误检查,病增强安全性.可以对部分函数进行执行严格模式,如: function func(){ 'us ...
- Dev TreeList 总结
1.表格的要求:如果要求有父子节点关系,则必须有ID和ParentID字段,并且父节点ParentID字段必须指向ID字段. 2.Access表格在穿入DATATABLE的时候,要想表现出父子节点关系 ...
- ERP入门
为什么想起写这个题目哪?其实这个问题很久就想写了,记得2005年时候,公司新招的二位刚毕业的大学生,一个专业是经济管理,一个是会计,东北大区培训后公司让我选择了一位带一带,我选择了一个会计专业的(因为 ...
- 自定义ViewGroup须知
自定义ViewGroup须知: 1.必须复写onMeasure和onLayout方法,根据容器的特性进行布局设计 2.复写onMeasure方法必须处理父布局设置宽或高为wrap_content情况下 ...
- android四大组件之Broadcast
广播的概念 现实中:我们常常使用电台通过发送广播发布消息,买个收音机,就能收听 Android:系统在产生某个事件时发送广播,应用程序使用广播接收者接收这个广播,就知道系统产生了什么事件.Androi ...