input输入框光标上下居中兼容问题

最新推荐文章于 2024-05-31 12:30:47 发布
最新推荐文章于 2024-05-31 12:30:47 发布
阅读量883 收藏
点赞数
分类专栏： web前端
原文链接：https://my.oschina.net/u/2417339/blog/852480
版权

input输入框光标上下居中兼容问题
转载chise0319 发布于2017-03-06 10:58:00 阅读数 28 收藏
展开

input高度40px,行高line-height:40px;这样写在safari下失效，safari下光标占满标签。 所以上网查了一下，找到了解决办法。 就是用padding撑高。见下图 输入图片说明输入图片说明

了不起的大志
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决input标签在ios中光标不居中问题，同时兼容安卓
weixin_42050203的博客
06-22 936
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输入框中的光标大小显示不一致的解决方法
12-13
input输入框中的光标大小显示不一致 ie7中和chrome的非常明显 先看看问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到...
input 使光标居中
mememama111的专栏
12-17 2840
比如说input  height:38px; 那么定义line-height:38px/p;则可以居中
chrome input 光标垂直居中问题
ISaiSai的专栏
12-23 5958
chrome 下设置较高的input 的时候，光标不会居中（即使设置了相同的height 和line-height） 解决方法：部分高度使用 相同   padding-top 和padding-bottom 代替                     .heightTest {             padding: 10px 0px;
如何让input框在用户输入后，文字居中显示
最新发布
ggq53219的博客
05-31 1475
使用 text-align: center;（通常不生效）
关于调整input里面的输入光标大小
fyqcdbdx的专栏
12-07 1万+
以前在项目里碰到过一个问题 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。 初步结论如下： IE：不管该行有没
Safari手机浏览器中input 光标不居中解决方案
风华绝代的博客
04-12 774
在iPhone的Safari中发现了这个问题，line-height 属性不能使input输入框中的光标垂直居中，总会有偏移量。查找资料之后发现要换一写法。 height= padding + font-size; 这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。 input{ p...
使用focus方法让光标默认停留在INPUT框
09-04
在网页开发中，有时我们需要实现一个功能，即用户打开页面后，输入框自动获取焦点，使得用户可以直接在该输入框中开始输入，无需额外点击。这可以提高用户体验，特别是对于移动设备上的应用，减少用户的操作步骤。这...
调整input里面的输入光标大小并兼容主流浏览器
01-19
input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，如下图：   在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又...
chrome、firefox、IE中input输入光标位置错位解决方案
09-22
总结来说，输入框光标位置错位是由于浏览器对CSS样式解析的差异造成的。通过理解这些差异并采用适当的CSS技巧，如设置合适的`height`和`padding`，可以有效地解决这一问题，确保在多种浏览器环境下，用户界面的一致...
input输入框删除文字效果js代码
06-11
为了提供更好的用户体验，许多网站会添加一些交互特效，例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在输入框中输入文字后，可以通过点击一个可操作的图标或按钮来轻松清除已输入的内容，类似...
input输入框中的光标上下不居中的解决方法
热门推荐
蝈蝈的博客
07-18 1万+
谷歌和火狐下input输入框中的光标大小显示不一致 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。一直没弄明白为什
Safari input 光标不居中解决方案
weixin_30897233的博客
05-05 152
昨天在iPhone的Safari中发现了这个问题，line-height 属性不能使input输入框中的光标垂直居中，总会有偏移量。查找资料之后发现要换一写法。 height= padding + font-size; 这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。 input{ ...
input输入框中光标高度的变化问题
weixin_34270865的博客
11-04 1015
2019独角兽企业重金招聘Python工程师标准>>> ...
input无法获取焦点_实现 input 无内容时缩小居中显示，有内容、有焦点时变长显示...
weixin_39699070的博客
12-01 124
前两天做了一个搜索中间页，有个 input 的效果挺有意思，准备分享一下。要求默认时(无内容、无焦点)显示居中效果。有焦点或者有内容，input 变长测试地址 ：https://www.lilnong.top/static/html/css-flex-input-auto-animate.htmlhttps://www.lilnong.top/stati...实现思路方案一：Vue +...
【小程序】input输入框属性及上下左右居中的示例（图文+代码）
【敦厚的曹操】的专栏
07-15 6933
input输入框属性说明及示例（图文+代码）
input输入框在移动端出现光标无法垂直居中的问题解决办法
web_callBack的博客
12-27 2695
出现问题的原因：就是在input设置样式的时候不要使用line-height来实现垂直居中。 解决的办法：要想实现文字的垂直居中，应该设置高度，然后再使用padding来进行填充。
让input的光标在中间
06-08
你可以使用HTML中的`<input>`标签和CSS的`text-align`属性来实现让输入框中光标居中的效果。以下是一个例子： ```html <input type="text" style="text-align:center;"> ``` 这样设置后，输入框中的文本和光标都会居中显示。如果需要设置输入框的宽度，可以使用CSS的`width`属性。例如： ```html <input type="text" style="text-align:center; width: 300px;"> ``` 这会让输入框的宽度为300像素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值