IOS移动端点击阴影如何去除？

最新推荐文章于 2022-01-27 20:22:11 发布
最新推荐文章于 2022-01-27 20:22:11 发布
阅读量8.5k 收藏 5
点赞数 5
CC 4.0 BY-SA版权
分类专栏： IOS兼容 文章标签： web开发 ios 移动 兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shuzipai/article/details/52312897
本文介绍了一种简单的方法来解决iOS移动端点击元素时出现背景颜色的问题。通过设置CSS样式 `-webkit-tap-highlight-color` 的值为透明，可以有效地消除点击时产生的高亮效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

IOS移动端点击阴影如何去除？

以前没怎么发现这个问题，不过最近涉及到了，就四处找了找，原来IOS比较得儿（得儿的不要不要的）

无论是什么东西，只要点击，就出现背景颜色。

解决方法如下：

*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}

-webkit的意思是：IOS浏览器；

-tap的意思是：点击；

-highlight的意思是：背景高亮；

-color的意思是：颜色

rgba(0,0,0,0) = transparent这两个是一个意思，就是纯黑透明；

记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 4098
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
去除移动端按钮点击时的阴影和rem标签垂直居中
weixin_30770783的博客
04-09 130
*{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ } 使用rem设置height和line-height相同时文字没有居中？pc上模拟器模拟出来的是垂直居中的没错，但是在实际手机中，苹果手机...
移动端点击阴影如何去除？
chinashanzhang的博客
02-27 1225
移动端，点击之后某个区域后有阴影问题1：如图所示，我所遇到的状况：问题2：去掉点击区域的边框阴影效果&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta content="width=device-width,initial-scale=1...
移动web开发经验总结
weixin_33904756的博客
05-03 184
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。 备注：transparent的属性值在android下无效。 2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。 3、-webkit-transform:translate3d(0, 0, 0)在ios下...
移动端div，a，img点击会出现阴影的处理
JunedQQ的博客
12-02 850
div,a,img { -webkit-tap-highlight-color: transparent; }
手机网页问题【解决方案】点击事件有阴影
朝阳39的博客
01-27 588
问题描述 使用手机访问网页时，触发点击事件时会出现阴影 解决方案 添加下方样式即可 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }
仿IOS移动端日历.zip
03-30
"仿iOS移动端日历.zip" 是一个专为移动端设计的、模仿iOS风格的日历插件，旨在提供用户友好的日期选择体验。这个压缩包包含了一系列文件，包括前端展示的核心HTML文件、样式CSS文件、图片资源以及JavaScript脚本，...
仿IOS移动端自定义日期选择插件Mdate发布
移动端日期选择插件（仿IOS）Mdate 是一个针对移动设备设计的日期选择组件，它在用户界面上模仿了苹果iOS操作系统的日期选择器。这种插件可以集成到多种类型的应用程序中，特别是那些需要用户选择日期的功能，如日历...
iOS移动端Web开发进阶：元标签与个性化图标详解
其次，关于电话号码识别的问题，iOS会自动将某些数字转换为可点击的链接用于拨打电话。为了阻止这种行为，开发者可以使用"format-detection"属性，并将其值设为"telephone=no"，以避免不必要的干扰。 文章还提到了...
【UE4阴影渲染深入研究】：移动端动态阴影实现技术详解（专业性技术探讨）
![【UE4阴影渲染深入研究】：移动端动态阴影实现技术详解（专业性技术探讨）]...本文将概述移动端动态阴影渲染的基本概念、面临的挑战与优化策略，并逐步深入探讨其在实际应用中的实现方法。我们将从理论基础出发，
CSS IOS去掉阴影
飞翔的熊blabla
08-21 387
input{ border: none; outline: none; -webkit-appearance: none; }
手机浏览器上，按钮、图片、文本框点击进去的时候有阴影，如何去掉？
weixin_33801856的博客
01-19 385
做好手机端页面的时候，点击按钮、图片、input文本框时会有***的阴影，加上下面的CSS样式就可以解决了。a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);} 转载于:https://blog.51cto.com/dsh109/1605531...
去掉移动端ios点击阴影
liuxing393724034的博客
10-31 1575
做移动端开发的时候遇到ios点击效果会自带背景阴影，去掉阴影的方法： *{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color:transparent; } -webkit的意思是：IOS浏览器； -tap的意思是：点击； -highlight的意思是：背景高亮； -color...
解决移动端页面点击图标或按钮产生阴影
dengla6847的博客
07-22 410
移动端页面按钮或者图标，点击的瞬间会有阴影，这是浏览器自带的，要去除这个阴影可以在css样式里加上以下属性： -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; 转载于:https://www.cnblogs.com/lguow...
iOS下按钮同时实现圆角与阴影效果
热门推荐
Zwarwolf的专栏
03-15 1万+
先看一下，实现一个button的圆角，如下代码： button.layer.masksToBounds = YES; button.layer.cornerRadius = 10; 实现一个按钮的阴影效果，如下代码： button.shadowOffset = CGSizeMake(10, 10); button.shadowOpa
ios点击或长按屏幕空白处 出现黑色蒙层
小知的博客
11-15 851
在微信中或者在safari中打开网页，例如简单的登录页，如果该网页没有撑满一屏，在点击这些空白处时，会出现黑色蒙层。 html高度没有满一屏，点击空白的区域是ios浏览器页面的区域，点击这些区域会出现黑色蒙层。 解决：设置html或者容器的高度为100vh，满一屏。这时点击就不会出现黑色蒙层了。 ...
ios 去除按钮的按下效果（阴影）
03-11 4504
Button.adjustsImageWhenHighlighted = NO;
移动端a标签点击有阴影
weixin_30571465的博客
06-19 201
a标签添加 -webkit-tap-highlight-color: rgba(0,0,0,0); 转载于:https://www.cnblogs.com/liangfc/p/9200680.html
移动端，div点击瞬间，出现阴影问题。
weixin_42448659的博客
07-05 4186
safari测试中意识到的问题，以求更好的用户体验，这种问题绝对要解决，后来使用了以下方法，那么div被点击的时候就不会有阴影出现，同理rgba(0, 0, 0, 0) 也可以改transparent （透明色） 作用相同。 div {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值