兼容safari的input光标

最新推荐文章于 2021-06-22 10:31:14 发布

qq_33374198

最新推荐文章于 2021-06-22 10:31:14 发布

阅读量1.6k

点赞数

分类专栏： safari 文章标签： safari input placeholder

本文链接：https://blog.csdn.net/qq_33374198/article/details/83340654

版权

safari 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大概就是不知道为什么safari的光标总是有一定的偏移量？？？？

看到各个的浏览器都可以垂直居中的光标竟然safari不行万恶的甲方爸爸又用着低版本的safari

于是乎

查了一下

safari的光标的长度就是line-height的值

所以说为什么光标老超出我的框框

所以就要设置 font-size 的值 = line-height的值才能让他们垂直居中

包括input的placeholder也是这样的~

所以~

兄弟们你们就写js把~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_33374198

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

兼容ios11中safari浏览器input标签光标错位问题

luwenze的博客

01-09

3376

1.不能直接设置input行高为输入框的高度，外部套个盒子用padding去挤； 2.如果是多个一排的情况不能直接设置父元素search-box的布局，比如display：inline-block、浮动、定位或者弹性布局等，光标还是会错位，父元素只能是块级元素给父元素再套一个元素input-wrap，该元素用浮动就可以了（试了别的布局方式不可以，应该只能用浮动了）具体写法：情况一...

解决input标签在ios中光标不居中问题，同时兼容安卓

weixin_42050203的博客

06-22

994

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输入框中光标高度的变化问题

luochao_tj的专栏

01-02

2万+

最近在项目中碰到一个问题：搜索框的光标高度在有输入内容和为空时发生很大变化。那么于是在web上搜索了一下前辈们是怎么解决此问题的首先，先看看问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部。 OK，既然知道了原因，我们就相应才去一些措施。

apple Safari input text 的兼容问题

weixin_30892037的博客

05-12

169

apple -webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。示例屏蔽ios和a...

safari的input问题

weixin_34392435的博客

04-15

374

切图网用户体验团队QUX在手机移动触屏web前端开发中碰到一个问题 — 纯css3定义的按钮在android安卓系统下显示正常，但是在苹果ios系统下，以ipad为例，ipad下呈现渐变和圆角状态。而css3中根本没有定义这些样式，那么问题来了，这个样式从哪里来？追溯到这个源头，问题就可以迎刃而解。于是翻阅大量文档资料。终于查到：原来iPhone上的safari解析input[type...

safari input默认样式

weixin_30552635的博客

11-20

652

　　在i标签下嵌套一个input标签设置了 -webkit-apprarence：none；　　设置了宽高，和padding：3px 　　结果placeholder显示不全　　　经排查这时候的input默认有圆角　　最后通过行高解决这个问题。转载于:https://www.cnblogs.com/chengyunshen/p/7866466.htm...

safari input 行高问题解决

jiubai_9000的博客

09-07

3033

input{ width:250px; height:30px; line-height:30px; font-size:14px; padding:0px 0px 0px 30px; [;height:20px;line-height:normal;padding:10px 0 0 30px;]/*safari hack*/只在safari浏览器使用这个 padding+heigh

Safari浏览器中input 光标lineheight失效不居中

weixin_38026561的博客

05-07

1438

Safari中bug，line-height 属性和高度相等，不能使input输入框中的光标垂直居中height = padding + font-size; 这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。 #willlearn-search { padding:17px...

javascript textarea光标定位方法(兼容IE和FF)

10-28

而 Firefox 及其他一些现代浏览器，如 Chrome 和 Safari，它们支持 `setSelectionRange()` 方法，可以直接设置光标的位置。以下是 FF 的光标定位方法： ```javascript var tea = document.getElementById("文本框的...

input元素[type="file"]时的样式定制及浏览器兼容性问题探讨

09-28

在某些情况下，尽管设置了`cursor:pointer`，`input[type="file"]`周围的某些区域可能仍然显示为文本光标，而不是手形指针，导致用户体验下降。这个问题可能需要更深入的CSS hack或者JavaScript来修复，例如监听鼠标...

输入框input组件在Safari光标占满的问题

guoqing的博客

03-04

387

只有在苹果系统的Safari才这样，windows浏览器正常解决方法：输入框不可以设置高度100%，上下间距使用padding控制

safari 浏览器不支持input 样式

u010957293的专栏

06-09

7283

在做页面时发现谷歌火狐对input表单支持的样式挺好但在Safari浏览器看时样式却没有了原来Safari对input有默认的样式只要在对应的input样式上加-webkit-appearance:none; 就行了

input输入框中的光标上下不居中的解决方法

蝈蝈的博客

07-18

1万+

谷歌和火狐下input输入框中的光标大小显示不一致 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。一直没弄明白为什

input autofocus focus() 在iphone上无效，无法在手机上默认获取焦点

热门推荐

悲了伤的老王的博客

01-14

3万+

input autofocus focus() 在iphone上无效，无法在手机上默认获取焦点 /在一般的正常浏览器上，可以用 javascript 来 focus 到一个输入框上： 1 var elem = document.getElementById(‘inputElementId’); 2 elem.focus(); //但是在 iOS 的 mobile safari 上，这样的代码不起作用 //只有在监听了用户出发的事件的函数中执行 focus 才有用。 //比如说这样： 1 var but

ios input框取不到光标不能输入

追逐的活

03-19

1万+

－webkit－user-select ：none ; 在移动端开发中，我们有时有针对性的写一些特殊的重置，比如：＊ { -webkit - touch - callout: none; //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为 //禁用Webkit内核浏览器的文字大小调整功能。 -webkit-text-size-adjust: non...

iPhone Safari 下 input disabled 颜色的修改

QooX5的博客

03-07

2717

最近在项目中遇到需要修改 input 的 disabled 状态的颜色的情况，然而无论如何都不成功，折腾了好久。后来发现还是 User Agent 样式的问题。iPhone Safari/webview input disabled 的默认样式：input:disabled{ opacity: 0.4 } 嗯，开发者工具只能看到这一条。即便是 reset 为 opacity : 1 ...

JS将光标聚焦在文本最后的实现代码

12-04

例如，可以使用`window.getSelection()`和`Range`来替换上面的`TextRange`部分，以实现跨浏览器兼容的光标定位。总的来说，这段代码展示了如何在JavaScript中利用特定的浏览器API（如`TextRange`）来控制文本...

Safari兼容问题

qq_42222908的博客

06-22

263

1.日期转换我们通用的时间格式一般是2021-06-22，这种格式在Safari下进行new Date （）转换是不支持的，要修改为2021/06/22

解决input标签在IOS浏览器中光标过长的问题

summer_my_sunshine的博客

03-02

3443

不要给input加高度，加padding撑开就行了

css解决input里面光标位置靠上问题

小小程序猿

01-04

3566

在Chrome浏览器中，当设置了line-height时，input无文字，光标高度与line-height一致；input有文字，光标高度从input顶部到文字底部。当没有设置line-height时，则是与font-size一致。想让光标居中的解决方案是：让input的高度等于里面文字的高度，然后用padding把框撑起来，这样光标的高度和位置就固定了。如：input{ heig