兼容safari的input光标

最新推荐文章于 2020-08-11 09:18:29 发布

原创最新推荐文章于 2020-08-11 09:18:29 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#safari #input #placeholder

safari 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了Safari浏览器中光标垂直居中显示的问题，特别是在低版本Safari中遇到的挑战。揭示了光标长度由line-height决定，解释了光标超出设定框的原因，并提供了设置font-size等于line-height来实现垂直居中的解决方法。

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

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

于是乎

查了一下

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

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

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

包括input的placeholder也是这样的~

所以~

兄弟们你们就写js把~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_33374198

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS中的caret-color属性：更改光标颜色以增强输入区域可见性

weixin_41455464的博客

06-23

967

在我们开始之前，先来简单了解一下什么是光标。光标（Caret）就是你在文本框、文本区域或其他可编辑元素中看到的那个闪烁的小竖线。它告诉你当前的输入位置，是用户与网页交互时非常重要的视觉提示。默认情况下，浏览器会根据操作系统和浏览器的主题自动选择光标的颜色。通常情况下，光标是黑色或白色的，但在某些自定义主题或深色模式下，光标可能会变得不明显，导致用户难以找到输入位置。这时，属性就派上用场了！好了，今天的讲座就到这里啦！通过属性，我们可以轻松地为输入区域的光标设置不同的颜色，从而提升用户的输入体验。

input 和 textarea，在进去页面，自动获取光标 ----- reactjs

brucehongsen的博客

09-12

1887

1. input 获取光标 import classNames from "classnames"; import React, { useEffect, useRef } from "react"; import { root } from "./index.module.scss"; export default function Input({ extra, onExtraClick, className, ...rest }) { /******************************

参与评论您还未登录，请先登录后发表或查看评论

apple Safari input text 的兼容问题

weixin_30892037的博客

05-12

191

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

safari的input问题

weixin_34392435的博客

04-15

402

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

safari input默认样式

weixin_30552635的博客

11-20

684

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

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

luwenze的博客

01-09

3477

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

safari 浏览器不支持input 样式

u010957293的专栏

06-09

7318

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

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标签在ios中光标不居中问题，同时兼容安卓

又又的博客

06-22

1085

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"> ...

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

12-04

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

史上最全的CSS hack方式一览

923723914

09-28

2246

做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己...

html5 点击input框聚焦后阻止页面大放大缩小

在工作中记录下美好的瞬间~~

05-17

6142

https://blog.youkuaiyun.com/xmtblog/article/details/46226717<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Safari输入框input使用line-height文字不居中问题

吴佳强的博客

08-11

789

测试中出现的问题，Safari输入input文本框有设置padding时，css样式设置 line-heigh t与 height等高，并不能使提示文本垂直居中，如下： padding: 4px 5px; height: 32px; line-height: 32px; 1 2 3 解决方案一：使用padding使提示文字居中，如果font-size:14px,UI高度为40px,我们可以设height：14px,padding:13px 0;如下： height: 16px; padding: 12p

input输入框中的光标在ios上乱跳的问题

小圣贤君的博客

10-30

1万+

最近一个项目中碰到一个问题：在一个页面中点击一个按钮会出现一个弹出框，这个弹出框给了fixed定位，并且宽高都等于100%，在这个弹出框中有包含input输入框的div,这个div未做定位设置。页面操作中看不出来什么问题，真机操作的时候会发现，安卓上没有问题，但是在ios上就出现问题了，尤其是ios11系统上，问题表现非常明显。在输入框输入内容的时候，手机下方会弹出一个键盘，然后输入框中光标就跟

隐藏safari表单输入项右侧出现的图标

liangxhblog的博客

07-09

1572

在safari浏览器上的表单，点击表单项，有可能出现如图所示的图标：这是浏览器自发的行为，想要隐藏这个图标，在css里加入以下代码即可。input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: abs...

input标签实现让光标不出现！（兼容版）

mrhaoxiaojun的博客

11-24

7084

需求运用input的标签的时候，我不想让光标出现，因为input内容是系统给定的，不让用户更改。这时候很自然的想到了input标签的readOnly属性，设置上之后，发现点击的时候，虽然不能更改内容，但是有小光标出现，要是没这个光标就完美了。于是又很自然的想到了disabled属性，哎呀，一看，发现挺不错，在chrome、FF和IE9以及以上的浏览器上，都不错，但是在IE8以及以下的浏览器上，字

css 调整input内文字与光标的初始位置