去除手机浏览器按钮点击出现的高亮框

最新推荐文章于 2024-06-16 12:02:56 发布

Tyler-阿信

最新推荐文章于 2024-06-16 12:02:56 发布

阅读量3.9k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/tyleraxin/article/details/42711937

版权

CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在工作中经常遇到在手机浏览器中浏览网页时，点击页面中的按钮或者是具备点击事件的元素，就会出现一个默认的高亮框，影响整体的感观体验。

我们可以用一个简单的css3属性就能加以解决，该属性就是：

-webkit-tap-highlight-color

举个栗子：

<a class="html5logo" href="javascript:void(0);"></a>

对该按钮加上相应的css样式：

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */

大功告成！

这样处理后，此a标签是没有点击时的样式，如果要加，可以自己再加伪类样式，在此不再赘述了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tyler-阿信

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微软Edge浏览器全解析

丁爸的博客

07-26

625

微软Edge浏览器基于Chromium内核，这意味着它采用了与Google Chrome浏览器相同的内核技术，从而可以实现与Chrome浏览器相同的网页兼容性和性能表现。此外，基于Chromium内核的Edge浏览器还可以使用Chrome浏览器的扩展插件，从而可以扩展浏览器的功能和性能。限制网站跟踪：智能跟踪防护功能可以限制网站和第三方服务的跟踪器访问浏览器的存储和网络能力，从而防止网站和第三方服务跟踪用户的浏览行为。

Jquery 点击按钮自动高亮实现原理及代码

10-26

拓展一个点击按钮自动高亮的原理很简单，在点击的时候给元素加上一个自定义的attr，具体实现祥看本

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

手机端点击取消高亮

weixin_33796177的博客

11-28

123

-webkit-tap-highlight-color: transparent; 转载于:https://www.cnblogs.com/xlj-code/p/7908271.html

CSS3去除移动端点击元素时产生的高亮背景色

Esther的博客

06-06

4926

做了一段时间的移动端项目了，碰到了一个顽固的BUG: 即点击一个icon元素的时候，发现底部会有一块蓝色的高亮。最终，只用了一小段的css代码就解决了： -webkit-tap-highlight-color: transparent; 这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。想要禁用这个高亮，设置颜色的alpha值为0即可...

如何去掉手机页面点击后的边框

weixin_34310369的博客

01-11

235

今天的课题是如何去掉手机页面中，点击图片后的那一瞬间的闪动。呵呵~这个闪动查到现在为止只有iphone上有，安卓系统一点就是一个大框框，超难看的！！希望我今天能研究出来！ ------------------到现在为止没有做出来，准备放弃了----------------- 转载于:https://blog.51cto.com/bibile/1114...

移动端按钮点击默认蓝框效果去除

weixin_30896763的博客

07-17

217

移动端按钮被点击时，外边缘会有蓝框出现，，下面的代码可以去掉蓝框效果，修复蓝边。 button, html input[type="button"] { outline:none; } 转载于:https://www.cnblogs.com/xiayedexin/p/4655291.html...

一个漂亮的下拉列表，去掉了灰色倒三角按钮

12-10

去除默认的倒三角按钮可能只是整个美化过程的一部分，设计师还可能添加一些动画效果，比如鼠标悬停时下拉列表的高亮显示，或者是选项切换时的渐变效果，从而让整个下拉列表的选择过程更加直观和吸引人。 5. 适应性...

Dreamweaver怎么去掉热点的黄色框/蓝色框?

09-24

在图像上拖动鼠标以定义热点区域，你会看到一个高亮的框（通常是黄色或蓝色）表示选定的热点。要去除这个边框，你需要编辑HTML代码。以下是详细的步骤： 1. **切换视图**：在Dreamweaver中，从“设计”视图切换到...

kindeditor--4.1.12 解决flash批量上传图片按钮不显示与支持video视频

03-31

在Flash批量上传图片功能上，KindEditor 4.1.12修复了按钮不显示的bug，这可能是因为在某些浏览器或操作系统环境下，Flash元素的渲染出现了问题。修复这个问题通常涉及调整Flash对象的嵌入方式，确保兼容性，或者...

谷普浏览器 1.8 正式版

02-03

　可自定义去掉多引擎搜索、在页面查找按钮、高亮关键字按钮和"+"号新建标签按钮等。　自定义搜索引擎　可在多引擎搜索栏里自由添加您想要的搜索引擎，您也可以自由删除已有的搜索引擎。　插件　支持和兼容IE...

CSS--移动端点击取消高亮--点击取消超链接高亮--去掉选中div后出现的蓝色高亮--点击取消ios蓝色框高亮

weixin_45406850的博客

04-21

3242

去掉选中div时的蓝色高亮，点击取消高亮，取消ios蓝色框高亮

安卓浏览器 去点击时的黄框 CSS

weixin_34008784的博客

02-18

176

为什么80%的码农都做不了架构师？>>> ...

点击按钮高亮时是灰色

qq_16231975的专栏

05-04

531

设置属性为custom

Jquery 拓展一个点击按钮自动高亮的方法

CF西西的专栏

04-24

1838

Jquery 拓展一个点击按钮自动高亮的方法其实很简单，我们点击的时候我们给元素加上一个自定义的attr，加上后便会有有一个匹配的样式去自动适配背景，几秒后去掉该样式恢复原状

关键词高亮显示浏览器 Edge 插件开发 & 源码

xchenhao 的博客

05-05

1631

关键词高亮显示浏览器 Edge/Chrome 插件开发 & 源码

手机中点击链接或button按钮出现黄色边框的解决办法

weixin_30902675的博客

09-13

451

a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);} 或a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, 2...

浏览器插件，高亮显示网页中的关键词

qq_19267863的博客

02-20

1698

浏览器插件，高亮显示搜索关键词，搜索字、词、语句高亮显示。

前端：鼠标点击实现高亮特效

最新发布

qq_45820271的博客

06-16

952

在vue组件中实现按钮的点击高亮过渡效果

Firefox 关键词高亮插件的简单实现

@zhujj_的博客

04-03

1836

遍历构造的数组中的内容，如果当前值等于关键词，那么构造一个强调标签 Strong 将关键词作为 innerText，并添加指定的样式和样式类名，然后加入到当前所遍历的节点之前；如果有纯文本节点，并且该纯文本节点中的内容包含了关键词，那么构造出一个数组，使用该数组来区分非关键词内容和关键词内容，以及他们之间的位置关系。遍历每一个节点，取出节点的类型-->nodeType 和节点的文本内容 -->content。如果是纯文本节点，则该节点的 nodeType 为3，如果是元素节点，则为 1。

uniapp实现按钮点击高亮切换

07-20

在 UniApp 中，你可以使用条件渲染和绑定事件来实现按钮点击高亮切换的效果。下面是一个简单的示例： 1. 在页面的模板中定义按钮，并为按钮绑定点击事件： ```html <template> <view> <button class="btn" :class="{ active: isActive }" @click="toggleActive">按钮</button> </view> </template> ``` 2. 在页面的脚本中定义相关的数据和方法： ```javascript <script> export default { data() { return { isActive: false }; }, methods: { toggleActive() { this.isActive = !this.isActive; } } }; </script> ``` 3. 在页面的样式中定义按钮的样式和高亮样式： ```css <style> .btn { width: 100px; height: 40px; background-color: #ccc; border-radius: 4px; color: #fff; } .active { background-color: #f00; } </style> ``` 在这个示例中，我们通过绑定 `isActive` 变量来控制按钮的高亮状态。当按钮被点击时，`toggleActive` 方法会切换 `isActive` 的值，从而实现按钮的高亮切换。通过条件渲染的方式，我们可以根据 `isActive` 的值来动态添加或移除 `active` 类，从而改变按钮的样式。这样，当按钮被点击时，它会切换为高亮状态，再次点击则取消高亮状态。你可以根据自己的需求修改样式和按钮的行为。