css -webkit-tap-highlight-color（ios半透明背景）

最新推荐文章于 2023-08-31 15:32:38 发布

转载最新推荐文章于 2023-08-31 15:32:38 发布 · 688 阅读

本文介绍如何使用-webkit-tap-highlight-color属性禁用iOS设备上点击元素时出现的灰色高亮效果。通过将该属性的alpha值设置为0可以完全禁用此效果。

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

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

示例：设置高亮色为50%透明的红色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

狗蛋*

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

苹果官方定制录制界面，点击出现水波的效果，avTouch

07-07

苹果官方定制录制界面，点击出现水波的效果，avTouch

利用CSS3实现文本框的清除按钮相关的一些效果

01-21

新技能传授-哔哔哔哔 search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：这是不错的体验！当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。貌似不和谐了，咋办？传授个新技能，借助HTML以及CSS，来模拟清除按钮可动态呈现的搜索框。如下CSS： CSS Code复制内容到剪贴板 .input

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

CSS3实现按钮点击效果

06-12

CSS3实现的多种鼠标点击效果，很有立体感，创意感

iPhone自带click点击效果用css去除

lyh_951128的博客

09-09

6454

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

css 去除 button 点击之后的默认样式

热门推荐

anaction的博客

10-11

1万+

HTML <button class="btn"></button> CSS .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; border-color: transparent; /...

取消button的点击效果_「React」制作点击按钮波纹效果

weixin_39926402的博客

12-06

745

简介模仿 Google Material 点击波纹效果。预览准备使用 react-spring 动画库。yarn add react-spring@next原理按钮结构：<button> <span class="g-ripple" /> <span>text</span> </button>其中 .g-ripple 用来...

iphone点击滑动图标确定效果

Shadow_Weirdo

11-22

533

html &lt;div class="wn-radio-box"&gt; &lt;span class="wn-radio-ball"&gt;&lt;/span&gt; &lt;/div&gt; css .wn-radio-box { right: .3rem; t

Bootstrap - 完美去除按钮点击后出现 “阴影边框“ 样式，按钮点击之后会有蓝色边框显示（全局 / 局部解决方案）

🏆 前端领域优质创作者

05-16

1724

Bootstrap按钮组件点击出现的边框怎样去掉，去除bootstrap中点击按钮,按钮会显示边框样式，解决bootstrap的button按钮点击之后会有蓝色边框的问题，bootstrap 按钮点击后出现边框，解决bootstrap的button按钮点击之后会有蓝色边框的问题，解决bootstrap按钮点击后再移入出现蓝色边框，如何去掉bootstrap按钮外边出现的边框，去除bootstrap按钮点击后的边框，Bootstrap按钮轮廓和单击轮廓后，去除bootstrap中点击按钮,按钮会显示边框样式，

html按钮去除点击效果,CSS - 点击效果 + 点击按钮更换背景

weixin_36302134的博客

06-03

1485

.bg_x{background:url('./背景1.jpg' )no-repeat center;/*background:url('./背景2.jpg' )no-repeat center;*/background-size:cover;background-attachment:fixed;position:fixed;top:0;left:0;width:100%;height:100%...

iphone下点击效果不生效

齐枫的博客

11-02

942

iphone下点击效果不生效 iPhone下有时候div的点击事件不会生效的解决办法手动在元素上添加一个空的onclick 事件 &lt;div onclick=""&gt;

css 清空ios端_css去除iPhone、iPad等IOS系统默认按钮样式

weixin_35598388的博客

12-24

634

最近在做手机网站的时候，安卓手机看起来都正常，但是在IOS系统下按钮都被系统自带的样式给取代了，下面青岛星网跟大家分享：css去除iPhone、iPad等IOS系统默认按钮样式 .css去除iPhone、iPad等IOS系统默认样式代码input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearanc...

使用CSS 取消手机端点击元素出现的蓝色背景效果

罗小文

09-13

835

css 取消元素聚焦背景（手机端）

各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记

前端水獭的博客

08-29

6681

写在前面最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。亮起来按钮 <div id="neon-btn"> <button class="btn one">Hover me</button> <button class="btn two">Hover me</button> <button cl

5去掉button按钮的点击样式_CSS实现复古按钮

weixin_34944897的博客

01-15

852

使用box-shadow属性来实现复古按钮的样式具体代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .button { outline: none;...

移动端，div点击瞬间，出现阴影问题。

weixin_42448659的博客

07-05

4190

safari测试中意识到的问题，以求更好的用户体验，这种问题绝对要解决，后来使用了以下方法，那么div被点击的时候就不会有阴影出现，同理rgba(0, 0, 0, 0) 也可以改transparent （透明色）作用相同。 div {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}...

原生button按钮css去掉默认样式

New个对象喝咖啡

08-31

1017

【代码】原生button按钮css去掉默认样式。

CSS-解决苹果点击高亮、安卓select灰色背景

小白

12-28

3460

1.在苹果手机上，用点击事件后会出现一个高亮的阴影；面对click事件的阴影，解决办法：*{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }2.在安卓手机上的select有灰色背景，解决办法：select{ appearance:none; -moz

移动web开发经验总结

weixin_33904756的博客

05-03

185

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

[CSS]解决安卓和ios ，样式或其他兼容问题

iChangebaobao的博客

11-08

1万+

input \button 样式问题 , ios用的样式不管用。解决方法：在css样式里面加 .input{ -webkit-appearance: none;/*解决ios样式问题*/ } ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态解决方法：禁止页面缩放 <meta content="yes" name="apple-mobile-web-a...

-webkit-tap-highlight-color