移动端页面点击块元素显示高亮背景问题解决办法

最新推荐文章于 2023-07-03 15:20:50 发布
最新推荐文章于 2023-07-03 15:20:50 发布
阅读量621 收藏 1
点赞数
分类专栏： css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/V_AYA_V/article/details/121243731
版权

CSS 文本适配 点击高亮 移动端优化 网页交互
关键词由优快云通过智能技术生成
这篇博客介绍了如何使用CSS属性`-webkit-text-size-adjust`来确保网页在不同设备上的文本大小一致，以及利用`-webkit-tap-highlight-color`消除移动端元素点击时的高亮效果，提升用户体验。

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

修改-webkit-text-size-adjust及 -webkit-tap-highlight-color属性

body,html{
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
移动端网页点击链接出现蓝色背景如何解决
心若向阳，无谓悲伤的博客
07-16 3037
最近在做移动端开发时，采用路由来实现网页之间的跳转，发现通过给文字和图片加<a>...</a>之后，每次在移动端运行时，点击或者长按都会出现蓝色背景，非常不好看，采用下面这个方法得到有效解决。只需要在css文件中加入以下这句代码，就可以搞定*{ -webkit-tap-highlight-color:rgba(0,0,0,0); }说明：*号表示应用与所有的元素。可能有的小...
移动端开发案例-京东移动端首页
m0_37643322的博客
09-26 5509
1.移动端技术选型 方案：单独制作移动页面方案 布局：流式布局 2.搭建相关文件夹结构 其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片 3.设置视口标签以及引入初始化样式 4.整体html结构 5.分析页面布局 移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位
适用移动网页图片左右滑动展示效果
06-11
效果描述： 一个非常简洁易用的，支持手势左右滑动的图文滚动效果 支持手机，PC客户端 不依赖jQuery插件即可实现 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (注意保持css、js两个文件路径的正确性)
移动端页面中的 点击高亮效果 -webkit-tap-highlight-color
cvper's world !
04-22 6989
移动端和pc 端页面的效果是有很多区别的，下面看一下这个移动端的点击高亮：当我们写一个链接时，我看看看点击效果：上面我们点击的时候出现了高亮的背景色，有的时候我们不需要的话就需要进行设置：设置  -webkit-tap-highlight-color: 参数 ;这里我设置了背景色透明，就是没有颜色：a{ .wh(100px,100px); display:block; -webk...
移动端，点击事件会出现一个高亮背景（解决）
weixin_30636089的博客
11-17 221
既然是高亮那就用css处理掉高亮的颜色就可以了。 -webkit-tap-highlight-color:rgba(0,0,0,0); 转载于:https://www.cnblogs.com/Silababy/p/6072751.html
移动端按钮点击背景高亮解决之法
追风Programer的博客
03-13 1398
在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 对于添加了cursor:pointer属性的元素，在移动端点击时，背景会高亮。为元素添加-webkit-tap-highlight-color: transparent...
移动端页面点击背景高亮问题解决方案
qq_24612793的博客
05-14 361
给被点击的div加一段css -webkit-tap-highlight-color: transparent;
京东移动端首页制作
WangZhang_521的博客
01-17 1934
京东移动端首页制作 index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 第一步，设置标准的视口标签 --> <meta name="viewport" content="width=
前端PC-移动端CSS公共样式+HTML
老街的酒香
05-07 4663
无聊把自己平时用的CSS公共样式整理发上来，方便自己查看也方便共享一：移动端公共样式/* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrollin......
浏览器兼容性问题及解决方案大汇总
最新发布
qq_51179053的博客
07-03 3434
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
CSS--移动端点击取消高亮--点击取消超链接高亮--去掉选中div后出现的蓝色高亮--点击取消ios蓝色框高亮
weixin_45406850的博客
04-21 3517
去掉选中div时的蓝色高亮，点击取消高亮，取消ios蓝色框高亮
移动前端开发 解决点击 input 默认高亮 边框
专注前端开发
06-07 3221
-webkit-tap-highlight-color:transparent; 安卓与苹果系统均可支持
css 解决网页代码中超链接在移动端点击时出现蓝色高亮的问题
黄大仙
08-19 511
为超链接添加-webkit-tap-highlight-color,把高亮颜色设置为透明即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { /*将高亮色更改为透明色*/ -webkit-tap-highlight-color: transpar
移动端点击事件出现背景框以及pc端a标签点击时出现背景框？？？
fb_01的专栏
12-18 9158
1、原因：移动端事件响应时会有默认的背景框颜色，a标签active时也有默认的背景框颜色。 2、解决方法：移动端让背景框不显示 -webkit-tap-highlight-color:rgba(0,0,0,0); -moz-tap-highlight-color:rgba(0,0,0,0); -ms-tap-highlight-color:rgba(0,0,0,0); -o-t
h5原生js实现一个进度条点击当前进度当前位置高亮
weixin_42578963的博客
01-18 311
可以使用 JavaScript 监听点击事件，在点击进度条时获取当前点击位置相对于进度条长度的百分比，并将进度条的宽度设置为该百分比。可以使用 CSS 类来控制进度条高亮显示。 示例代码: <div id="progress-bar"></div> <script> var progressBar = document.getElementById("pr...
近期遇到的问题2021-10-26
weixin_45102514的博客
10-26 153
近一周主要复习了移动端页面布局，做了三个移动端页面练手，还有学习了jsp 主要遇到的问题： 1.移动端按钮点击背景高亮解决之法 在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 对于添加了 cursor:pointer 属性的元素，在移动端点击时，背景会高亮。为元素添加 -webkit-tap-highlight-color: tran
html－手机端－点击按钮－去高亮－加点击效果
热门推荐
xiaona_jia的博客
01-13 1万+
（1）前提：html页面 ，手机端， （2）问题一： 在iphone上（貌似是9以后。。），给div/span/...等元素上加onclick事件，根本不起作用，这是为啥捏？ －－ 在元素上加  cursor:pointer;  添加上后，系统会默认为这是一个可点击的元素。 cursor:pointer （3）问题二： 在做手机页面时候，（iphone和安卓上都会有这个
html中a标签点击去掉高亮背景
niulijieniu的专栏
06-22 1万+
a标签默认点击的时候会有个高亮的背景色，要把这个去掉只需要给a标签设置css样式： -webkit-tap-highlight-color:rgba(0,0,0,0);
解决h5中点击a标签高亮的代码
agk98610的博客
09-15 901
css:-webkit-tap-highlight-color:transparent;这样就可以解决~ 转载于:https://www.cnblogs.com/webgirl/p/4810385.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值