关于调整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下光标跟文字的大小一致。

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;
}

 

相关文章
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
|
Java Maven
关于 Could not find artifact ...:pom:1.0-SNAPSHOT 的问题!
关于 Could not find artifact ...:pom:1.0-SNAPSHOT 的问题!
3505 0
关于 Could not find artifact ...:pom:1.0-SNAPSHOT 的问题!
|
Web App开发 前端开发 JavaScript
React 之 requestIdleCallback 来了解一下
React 之 requestIdleCallback 来了解一下
1916 0
【资源分享】阿里云盘资源永久汇总页
不知道大家的阿里云盘现在有多少容量了?阿里为了资源也为了网盘活跃度,在九月推出限时活动,分享赢10T容量。因此带来了这一波的阿里盘分享热潮,当然大部分人都是奔着10T去的。所以网上资源翻来覆去的很多,重复的也多。正因如此空空发现了一位网友非常的有心,将分享出来网盘资源进行了梳理汇总,并且搭建了这个终极阿里云盘资源整合网站——【阿里云盘资源永久汇总页】。
258141 11
【资源分享】阿里云盘资源永久汇总页
|
Java Spring
解决Spring工具类BeanUtils copyProperties方法复制null的问题
解决Spring工具类BeanUtils copyProperties方法复制null的问题
1680 0
|
移动开发 JavaScript 应用服务中间件
Taro——H5项目如何修改静态文件入口
这里我们说两种情况,一种是在静态资源引入的时候加入前缀,另一种是真正的将静态资源输出到指定的目录下。
335 2
Vue3进度条(Progress)
这是一个基于 Vue2 的进度条组件,支持线性 (`line`) 和圆形 (`circle`) 两种模式。可通过多种属性自定义进度条的样式和行为,包括宽度、进度百分比、颜色、线宽、线帽样式等。此外,还支持显示进度文本或图标,并允许通过插槽自定义内容。该组件提供了丰富的配置选项,适用于多种应用场景。
2049 5
Vue3进度条(Progress)
|
前端开发
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
本文介绍了CSS盒子模型的基本概念,包括内容、内边距、边框和外边距的属性,以及标准盒子模型和怪异盒子模型的区别和转换方法。
1172 1
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)

热门文章

最新文章