在工作中常常遇到在手机浏览器中浏览网页时。点击页面中的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. Git_解决冲突

    人生不如意之事十之八九,合并分支往往也不是一帆风顺的. 准备新的feature1分支,继续我们的新分支开发: $ git checkout -b feature1 Switched to a new ...

  2. CentOS6安装redmine

    Author: JinDate: 20140827System: CentOS release 6.5 (Final) 参考:http://www.redmine.org/projects/redmi ...

  3. 小程序获取openid unionid session_key

    .wxml <button bindtap="paytap">授权</button> .js Page({ paytap: function () { va ...

  4. 转:Windows中的命令行提示符里的Start命令执行路径包含空格时的问题

    转自:http://www.x2009.net/articles/windows-command-line-prompt-start-path-space.html 当使用Windows 中的命令行提 ...

  5. 从零开始搭建linux下laravel 5.5所需环境(一)

    首先你需要有一台linux服务器,或者虚拟机,这里就不赘述了,不会的可以自行百度. 我这里准备的是一台腾讯云服务器,系统为CentOS 7.4 64位. 你可以使用腾讯云的登录按钮登录到服务器,也可以 ...

  6. 使用LM2576制作数控电源

    http://www.daxia.com/bibis/moredata30_1207792_29862.shtml 图中DA和PWM任选其一, 当DA或PWM输出为0~1.25V时,输出在12.5V~ ...

  7. Remon Spekreijse CSerialPort串口类的修正版2014-01-10

    转自:http://m.blog.csdn.net/blog/itas109/18358297# 2014-1-16阅读691 评论0 如需转载请标明出处:http://blog.csdn.net/i ...

  8. 使用 NuGet 更新套件時將 jQuery 升級到 2.0.2 應該如何降級

    我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如jQuery.Json.NET. EntityFramework.ELMAH.… 等等.各位可 ...

  9. C#程序集系列09,程序集签名

    在"C#程序集系列08,设置程序集版本"中体验了为程序集设置版本,但对于程序集的安全性来说,还远远不够.本篇体验程序集的签名. □ 程序集的签名 →F盘as文件夹下有多个文件→在程 ...

  10. 报错:具有键"..."的ViewData项属于类型"...",但它必须属于类型"IEnumerable<SelectListItem>"

    报错:具有键"..."的ViewData项属于类型"...",但它必须属于类型"IEnumerable<SelectListItem>&q ...