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

能够用一个简单的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被选中的感觉。

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

  1. 手机浏览器页面点击不跳转(Android手机部分浏览器) 浏览器双击放大网页 解决

    手机端web网页项目(angluar js 1.4.6) 1,网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转 ...

  2. 去除手机浏览器input焦点默认边框(直接用outline:none就可以了)

    1.使用Chrome的都知道,当鼠标焦点在input.textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,out ...

  3. css:去掉手机浏览器上点击时的边框和阴影

    outline:none;(去掉蓝框) -webkit-tap-highlight-color:rgba(0,0,0,0) ;(去掉阴影)适用于ios,Android

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

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

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

    做一个假的adnroid app.要实现点击桌面图标.打开手机浏览器进入对应的站点,实现方法非常easy import android.app.Activity; import android.con ...

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

    近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...

  7. 手机浏览器下IScroll中click事件

    产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...

  8. UC手机浏览器js加入收藏夹

    概述 对于某些网站来说,让用户一键把网页加入收藏夹的设计是非常棒的,它能提醒用户把网页加入收藏夹,从而增加用户的回访率,使网站获得更多的流量. 在PC端,只有ie和ff支持用js把网页加入收藏夹的操作 ...

  9. wp8手机浏览器项目

    项目需求如下: 1.页面布局 最上方为搜索/网址框 中间为网页显示区,默认主页为百度搜索 最下方为功能栏,分别有后退,前进,窗口和更多功能 在更多功能中有 分享给好友 发送网址到桌面 查看历史记录等 ...

随机推荐

  1. 华为S5300系列交换机V100R006SPH017VRP热补丁

    S5300_V100R006SPH017.pat 附件: 链接:https://pan.baidu.com/s/16lrNMykatXR3_5xKBc2zuw  密码:rt1l

  2. checked和unchecked的区别

    int类型的最大值是2147483647,2个最大值相加就会超出int的最大值,即出现溢出. class Program { static void Main(string[] args) { int ...

  3. jsondataobjects

    jsondataobjects GITHUB: https://github.com/ahausladen/jsondataobjects.git 跨平台JSON库 Json Data Objects ...

  4. ubuntu 键盘布局修改

    键盘打不出 | 符号 sudo dpkg-reconfigure keyboard-configuration 改为标准的罗技键盘

  5. python 查看模块的存放位置

    执行 dlib.__file__ 输出 '/anaconda2/lib/python2.7/site-packages/dlib/__init__.pyc'

  6. Intel® Core™ i5-5300U Processor

    3M Cache, up to 2.90 GHz Specifications Ordering and Compliance Essentials     Product Collection 5t ...

  7. 【BZOJ】【2200】【USACO 2011 Jan】道路和航线

    做了一天…… TLE:数组开小了-_-#道路是有50000的,双向要乘二.(我特么怎么想的就以为是树了……) WA:一些大点都WA了,小点都过了.好纠结…… AC了QAQ,不知道为什么,在并查集合并的 ...

  8. 3D几何图形生成的DEMO

    3D几何图形生成的DEMO 可以生成以下几种图形: [1] 平面(Plane)图形的生成算法 [2] 立方体(Box)图形的生成算法 [3] 球(Sphere)图形的生成算法 [4] 圆锥(Cone) ...

  9. Gradle for Android 翻译 -1

    英文版电子书下载 参考:Gradle for Android  一.从 Gradle 和 AS 开始 [Getting Started with Gradle and Android Studio] ...

  10. 【反射】Reflect Class Field Method Constructor

    关于反射 Reflection 面试题,什么是反射(反射的概念)? 主要是指程序可以访问,检测和修改它本身状态或行为的一种能力,并能根据自身行为的状态和结果,调整或修改应用所描述行为的状态和相关的语义 ...