移动端点击div区域或者span出现蓝色边框

最新推荐文章于 2025-01-22 11:04:29 发布
最新推荐文章于 2025-01-22 11:04:29 发布
阅读量5.2k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34803821/article/details/85331020
本文介绍了一种解决移动端点击div或button时出现高亮边框的方法，通过在样式中加入特定CSS属性，实现视觉效果的优化。

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

div或者button的样式里面加上：

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

解决移动端点击出现div等出现区域边框的问题

移动端热点问题
MingL520的博客
05-31 599
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9942
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
去除移动端浏览器点击元素时的边框
weixin_30367169的博客
04-10 133
手机(特别是Android)浏览器中点击元素 a, input, div中的文字时, 还有一个边框 要去除边框, 可以为元素添加如下css /* 来自Pure.css http://purecss.io/*/ -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-...
div点击出现蓝框是咋回事？
qq_39429962的博客
10-11 8428
我们大家肯定都遇到过，点击一个div他的出现了一个蓝色边框，而且给他设置border属性也不会变化，这是为什么呢？ 这是因为我们点击div时它获取了焦点，所谓焦点指的就是当前操作的对象，当我们操作一个div时，这个div就获取了焦点。 解决办法： div:focus{ outline:none; }  ...
swiper的按钮点击出现蓝色边框或者元素点击出现蓝色边框
大宽的博客
11-23 1289
swiper的按钮点击出现蓝色边框或者元素点击出现蓝色边框欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 span:focus { outline: none !important;
移动端div背景图出现白边
Smilelifeeveryday的博客
03-31 844
移动端 h5 div背景图 白边
点击出现蓝色边框或者出现半透明蓝色背景解决方案
A_R_ZHAORY的博客
01-08 783
*{ outline: none !important; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; }
<div class="sidebar-icon-block sidebar-icon-block-hover" style="margin-top: 0px" @click="changeSearchDetail"> <div class="sidebar-icon"> <aui-image :src="searchListIcon1Url"></aui-image> </div> <span class="sidebar-span">物流资源</span> </div> 多个这种div ,选中的样式怎样添加
最新发布
07-31
在Vue中，多个类似结构的div（如导航图标块）需要实现选中状态样式切换，可以通过动态绑定class或style实现。核心思路是：为每个图标块绑定一个点击事件，记录当前选中的索引或标识，然后根据当前选中项动态添加选中...
移动端 h5开发相关内容总结——CSS篇
热门推荐
强子的专栏
01-06 3万+
1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">其它相关配置内容如下： width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) in
移动端、安卓、IOS兼容性面试题
qq_60976312的博客
06-10 1140
移动端、安卓、IOS兼容性面试题
CSS基础知识
mantou_riji的博客
04-10 1129
文章目录继承选择器的权重像素和百分比em和rem颜色单位 继承 样式的继承：我们为一个元素设置的样式也会作用到它的后代元素上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p{ color: salmon; } </style> </head> &l
csdn编写技巧
m0_68654129的博客
01-22 645
使用<font>或<span>标签可以修改字体颜色。使用代码块语法可以高亮显示文字。在 优快云 编辑器中实时预览效果，确保颜色设置正确。希望这些方法能帮助你在 优快云 中实现字体颜色的修改！如果还有其他问题，欢迎继续提问！
CSS--移动端点击取消高亮--点击取消超链接高亮--去掉选中div后出现的蓝色高亮--点击取消ios蓝色框高亮
weixin_45406850的博客
04-21 3607
去掉选中div时的蓝色高亮，点击取消高亮，取消ios蓝色框高亮
移动端解决onclick事件元素出现背景色框问题
卜小娴的博客
09-11 1880
当我们在移动端给元素添加点击事件时我们会发现点击时元素会默认出现一个背景色框或者高亮显示，这个时候我们就需要使用-webkit-tap-highlight-color属性来解决，它的原理是使用用户自定义颜色值覆盖原先的高亮色，使用如下： -webkit-tap-highlight-color：transparent/color； 用户可以自定义取值，当取值transparent时将不会出现背景色
使用overflow，导致页面在苹果端右边出现背景色1px细线
yanchuh的博客
04-26 376
里面的主体白色块区域，是自己写的，在构建底部半圆形的缺口时，在苹果手机上测试的时候，右侧缺口处出现1px左右的细线问题，在将代码一个个注释，再运行，我发现由于我在标题向下挪动的时候为了使内部第一个盒子的margin-top生效，我在最大的白盒子上添加了overflow：hidden，用来构建bfc，在将overflow注释掉后，细线问题解决。最近在做一个抖音里分享付费的一个简单的移动端页面。
从零开始web前端（常用html标签）
wangfengqichen的博客
04-28 1632
从零开始web前端，入门html部分常用标签。
[样式]针对<span>标签选前和选中后的状态改变
海阔天空的专栏
05-26 8135
选中前为"状态",选中后为"★状态" html代码及js方法如下 .sctj{ border:1px dotted #640000; background: #F7F9FC; margin-top:5px!important; color:#000; padding:5px; margin-left:10px; white-space: nowr
html中连续点击某个标签会出现蓝色的解决方法
weixin_34179762的博客
03-31 879
给标签加上下面的属性就可以了，也可以把这些属性建立一个class名，谁需要的时候加上也ok -moz-user-select: none; /*mozilar*/ -webkit-user-select: none; /*webkit*/ -ms-user-select: none; /*IE*/ user-select: none; 转载于:https://www.cnbl...
元素点击之后出现蓝色边框
weixin_46884853的博客
10-21 1088
谷歌浏览器中点击元素出现蓝色边框 outline:none
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值