关于调整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;
}

 

相关文章
vue3+vite项目中使用svg图标
vue3+vite项目中使用svg图标
1393 0
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
后端返回base64格式数据转excel格式文件并下载
后端返回base64格式数据转excel格式文件并下载
492 0
|
自然语言处理 前端开发 JavaScript
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
React 时间日期选择器(date-timepicker)组件,与表单、富文本、表格、拖拽等组件一样,是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12/24小时,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件,每一款都经过我实际测试,推荐给大家。
2060 0
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
|
9月前
|
Web App开发 前端开发 JavaScript
Promise.allSettled()方法的兼容性如何?
Promise.allSettled()方法的兼容性如何?
499 75
|
12月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
1994 1
|
数据采集 JSON 前端开发
设计稿转代码利器:Design2Code
【2月更文挑战第13天】设计稿转代码利器:Design2Code
953 2
设计稿转代码利器:Design2Code
|
Java Linux Maven
Maven 仓库
Maven仓库管理Java构件,包括依赖与插件。仓库分本地、中央和远程。本地仓库在首次运行时创建,默认位于用户目录的`.m2/repository`,可自定义。Maven优先从本地仓库获取构件,缺失则从远程仓库下载,中央仓库是默认远程仓库,包含大量开源Java构件,由社区维护,可通过http://search.maven.org/搜索。
|
JavaScript 前端开发
如何解决 Critical dependency: the request of a dependency is an expression ?
如何解决 Critical dependency: the request of a dependency is an expression ?
304 0
|
前端开发 数据可视化 Dubbo
深入解析 Axios 取消请求:2 种方法助你掌握控制权
在前端开发中,网络请求是非常常见的操作。而有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用 Axios 发送请求时取消这些请求。
深入解析 Axios 取消请求:2 种方法助你掌握控制权