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

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

可以用一个简单的css3属性来解决:tap-highlight-color,最好加上webkit浏览器前缀。

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓,4.0以下 */  

如果你的一大div中包含了很多小的同类的小div,点击这些小的div要触发事件,你利用事件委托只给外层大的div绑定了点击事件(这样就只要绑定一次就够啦),那这个属性就会用上,当你点击某个小div时就不会出现整个大div被选中的感觉。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-08 03:23:41

CSS3去除手机浏览器按钮点击出现的高亮框的相关文章

ios按钮点击时的灰色框

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

【微信ticket跳转】手机浏览器网页跳转到微信内置浏览器打开

[微信ticket跳转]手机浏览器网页跳转到微信内置浏览器打开 起始不少人已经关注到了招行的智能客服:http://xyk.cmbchina.com/Latte/wx/20150520wkf?from=ISTA004&clientid= 招行的这个跳转,发现后台返回的这个数据{"returnCode":"0000","returnMessage":"success","url":"weix

武汉兼职女:点击浏览器或者手机返回按钮,刷新历史页面解决方案

武汉兼职女:点击浏览器或者手机返回按钮,刷新历史页面解决方案 我前面文章中写了返回上一页并刷新页面 的方式.这个是我们点击某个按钮,来进行操作的.但是假如我们不是点击某个按钮,而是直接点击手机下面的返回按钮或者浏览器自带返回按钮,如何刷新之前的历史页面呢? 应用场景假如我们有如下页面列表信息页面 enter image description here 点击进入详情页面,在详情页面修改了数据. enter image description here 通过历史返回,再返回到列表信息页面,因为列表

css3在不同型号手机浏览器上的兼容一览表

网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   √:部分支持   ×:不支持   (-webkit):添加-webkit前缀才支持   (-ms):添加 -ms前缀才支持 css3总结: 对于webkit内核的浏览器, 除media.text-shadow外,使用其它属性基本上要加上webkit前缀. gradient在低版本的系统中渲染效果不丰富 io

robotium脚本封装为APK,实现脱离手机数据线,使用按钮点击控制用例运行的小功能

最近一直在完成一些robotium的小功能,用来更方便的完成一些小功能的测试,或者可以说用来娱乐吧,幸得群内大神思路指点,就此引申,终于把这个功能得以实现 ---------------将robotium脚本封装为APK,使用按钮控制用例运行覆盖程度,测试结果以简单的xml文件输入到手机SD卡目录下---------------------- 废话不多说,转正题: 一.首先明确一点,这篇文章,是在你所编写的robotium脚本运行无异常的前提下实施 二.阐明思路: 1.我们需要一个运行良好的,逻

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑. 那么问题来了,我们的网页不

android 点击桌面图标,打开手机浏览器进入相应的网站

做一个假的adnroid app,要实现点击桌面图标,打开手机浏览器进入相应的网站,实现方法很简单 import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle; public class MainActivity extends Activity { @Override protected void onCreate(Bundle save

CSS3和js炫酷点击按钮3D翻转动画特效

简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 使用方法 使用该按钮过渡动画特效需要引入它提供的按钮样式表style.css和用于触发按钮点击事件的js文件script.js. HTML结构 该点击按钮过渡动画特效使用一个嵌套div的HTML结构: <div class="btn"> <div class="

CSS 兼容手机浏览器 点击蓝色边框

* { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; } CSS放入全局,屏蔽部分手机浏览器 点击链接出现蓝色虚线框.