input输入框在移动端出现光标无法垂直居中的问题解决办法

最新推荐文章于 2024-05-31 12:30:47 发布
原创 最新推荐文章于 2024-05-31 12:30:47 发布 · 2.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在设置input样式时遇到的文字垂直居中问题及其解决办法。指出不应使用line-height属性来实现垂直居中，而应通过设置元素的高度及使用padding进行调整。

出现问题的原因：就是在input设置样式的时候不要使用line-height来实现垂直居中。

解决的办法：要想实现文字的垂直居中，应该设置高度，然后再使用padding来进行填充。


web_callBack
关注
【Flutter 问题系列第 62 篇】解决 TextField 输入框组件设置高度后输入的内容无法居中的问题
“Allen Su”的博客
05-01 2962
解决 TextField 输入框组件设置高度后输入的内容无法居中的问题
layui模态框不居中的几种解决方法
web18484626332的博客
05-14 1288
今天在写项目时，发现编写的模态框显示不居中，内容把模态框给撑大了，但没有居中，后来发现只要把窗口变动一下模态框就自动居中了（说明模态框的已经有居中属性了，再设置居中属性没效果），这种效果是不满足需求的。 使用的代码如下： layer.alert(ckdt.length + '条数据统一密码设置成功!' + '<table id="tabDerive" layui-filter="tabDerive"></table>'); 样式： 点击确定 发现模态框没有居中。 后来就找了到了
chrome input 光标垂直居中问题
ISaiSai的专栏
12-23 6053
chrome 下设置较高的input 的时候，光标不会居中（即使设置了相同的height 和line-height） 解决方法：部分高度使用 相同   padding-top 和padding-bottom 代替                     .heightTest {             padding: 10px 0px;
input输入框光标上下居中兼容问题
chise0319的专栏
03-06 426
input高度40px,行高line-height:40px;这样写在safari下失效，safari下光标占满标签。 所以上网查了一下，找到了解决办法。 就是用padding撑高。见下图 ...
input的默认文字在手机端下垂直居中问题
weixin_40544688的博客
06-25 940
平时切页面还真没注意到这个问题，第一反应就是高度行高，后来百度发现这个就是一个bug。看到很多网站是用span来代替placeholder，配合js一起引用，脑袋突然想到另外一个思路。 p1)给input添加一个自定义属性代替placeholder如：data-holder="请输入" p2)检测input身上是否有data-holder属性，如果有先把input的字体颜色变灰，同时获取这...
【css】input文本框光标垂直不居中
夕雨林流金,web全栈,web全端,网站技术博客
04-13 2137
设置样式：line-height:32px\9; 有人说safari不兼容加这个： @media screen and (-webkit-min-device-pixel-ratio:0){ input{ line-height:50%; } } 来源：http://tinycss.blog.163.com/blog/static/200020315201262093239625/
input输入框中的光标大小显示不一致的解决方法
09-28
本知识点将对Chrome浏览器中input输入框光标大小显示不一致的问题进行深入解析，并提供解决方案。 首先，关于Chrome浏览器对光标高度的设置原则，需要了解以下几点： 1. 当input输入框中没有内容时，光标的高度等于...
使用focus方法让光标默认停留在INPUT框
09-04
3. `focus()`方法被调用，将焦点设置到找到的`<input>`元素上，使得光标自动出现在输入框内。 需要注意的是，`focus`方法可能不会在所有情况下都能成功设置焦点，比如当前页面已有其他元素拥有焦点，或者浏览器有...
解决input标签在ios中光标不居中问题，同时兼容安卓
又又的博客
06-22 1101
1、首先input的所有父级元素不能加 line-height 属性; 2、初始化input样式 line-height:normal; 3、要想光标不撑满这个input狂，加一个上下边框 4、代码如下，有需要的小伙伴可以试试： Html： <div class="head-search-item"> <input type="text"placeholder="请输入商品/店铺名称"> <div class="icon"> ...
如何让input框在用户输入后，文字居中显示
ggq53219的博客
05-31 4254
使用 text-align: center;（通常不生效）
CSS:移动端实现垂直居中的方法
mcYang0929的博客
12-20 8938
方法1:table-cell html结构<div class="box box1"> <span>垂直居中</span> </div>CSS.box1{ display: table-cell; vertical-align: middle; text-align: center; }方法2：display:flex
【转】移动端input输入placeholder垂直不居中
weixin_30795127的博客
12-01 549
在移动端编写input输入框时候，为了输入文字与输入框垂直居中，一般情况下，会将input的line-height的高度等于height。但在移动端输入的时候会发现，虽然输入内容确实是垂直居中了，但是光标的位置是靠上的，导致感官上的不美观。于是对input设置的时候，首先确定字体的大小如font-size:16px，其次我们确定设计稿里input的高度，如input高度为40px，那么此时的代码应...
element ui 移动端IOS设备input框光标不垂直居中问题处理
m0_52459016的博客
03-20 492
说明：在移动端开发时发现ios设备光标偏上，不垂直居中，经过测试 设置 line-height:normal;没有效果，经过研究测试发下使用以下代码可以将问题解决，亲测有效，特此记录。
uni-app的输入框input使用text-indent无用 且高度居中显示
m0_66237295的博客
11-10 1852
uni-app的输入框input使用text-indent无用 且input高度居左上显示
移动端点击input不触发光标（原生js）
团酱
03-19 1070
当在移动端的时候，我那边在点击input输入框的时候可以跳转到另一个页面，而不是触发光标，这里就可以在获取焦点的时候让input失去焦点，也可以屏蔽默认键盘弹出 // 失去焦点 var inp = document.querySelectorAll("input") for (let i = 0; i < inp.length; i++) { inp[i].onfocus
解决input框对不齐的问题
chenronglong20的博客
02-13 3569
要想解决这个问题，首先你得了解input框 了解它的默认样式 input框的默认样式有: 1：获取焦点时的轮廓 outline； 2：2px的border边框 3:1px的top和bottom的padding值 产生的问题如下： 问题：默认padding值和border值是导致它们水平对不齐的根本原因 解决办法：1:float:left;浮动(让它和需要对齐的元素都一起浮动，然后他们就会紧贴在...
uni-app input输入框聚焦后焦点错乱偏移
jjbao的博客
01-07 3664
uni-app input输入框聚焦后焦点错乱偏移
关于调整input里面的输入光标大小
热门推荐
fyqcdbdx的专栏
12-07 1万+
以前在项目里碰到过一个问题 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。 初步结论如下： IE：不管该行有没
css 输入框左右居中
weixin_42575505的博客
01-15 1097
使用 CSS 可以让输入框左右居中。可以使用 "text-align: center" 属性将文本居中对齐。如果要将整个输入框居中，可以使用 "margin: 0 auto" 属性将左右边距设置为自动。具体代码如下： input[type='text'] { display:block; margin: 0 auto; text-align:center; } ...
vue3中引入postcss-pxtorem导致部分input输入框的光标需要放大页面才能看到
最新发布
07-10
在 Vue3 项目中使用 `postcss-pxtorem` 插件时，如果出现部分 `<input>` 输入框的光标显示异常（需要放大页面才能看到），这通常与插件将像素单位转换为 `rem` 后导致样式布局发生变化有关。 ### 原因分析 1. **字体大小和行高的不匹配**：`postcss-pxtoret` 将 px 单位转换为 rem，可能影响了 `<input>` 元素的字体大小或行高设置，从而导致光标位置偏移或隐藏。 2. **元素高度计算异常**：由于 `rem` 转换后的实际高度小于预期，输入框内容区域变小，光标无法正确居中显示[^1]。 3. **浏览器默认样式覆盖问题**：某些浏览器对 `<input>` 元素有默认的样式处理逻辑，当通过 `rem` 控制其尺寸时，可能会导致浏览器内部计算的光标绘制区域不准确[^1]。 ### 解决方案 #### 方法一：调整字体大小与行高 确保 `<input>` 元素的字体大小和行高保持一致，并且不低于浏览器默认的最小可识别值。例如： ```css input { font-size: 1rem; line-height: 1.5rem; height: 2rem; } ``` 这样可以避免因尺寸过小而导致光标不可见的问题。 #### 方法二：排除特定元素的 px 到 rem 转换 可以在 `postcss.config.js` 中配置 `postcss-pxtorem` 的 `exclude` 规则，使 `<input>` 元素保留原始的 `px` 单位，避免被转换为 `rem`： ```js module.exports = { plugins: { postcss-pxtorem: { rootValue: 16, // 根据项目的实际根字号进行设置 propList: ['*', '!border*'], // 指定哪些 CSS 属性需要转换 exclude: /node_modules/i, selectorBlackList: ['input'] // 排除 input 元素的转换 } } }; ``` #### 方法三：使用 `transform: scale()` 临时修复视觉效果 对于已经受到影响的 `<input>` 元素，可以通过 CSS 的 `transform: scale()` 来局部放大其显示效果，使其光标可见： ```css input { transform: scale(1.1); transform-origin: left top; } ``` 该方法适用于快速验证问题是否由尺寸缩放引起，但不适合长期使用，因为会影响整体布局和交互体验。 #### 方法四：检查并重置浏览器默认样式 使用 CSS Reset 或 Normalize.css 可以统一不同浏览器对表单控件的默认样式处理，减少因浏览器差异导致的显示问题： ```bash npm install normalize.css ``` 然后在项目的入口文件（如 `main.js`）中引入： ```js import 'normalize.css'; ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值