这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果。但是有的时候我们并不想要这些效果。并且希望点击的时候实现神不知鬼不觉的感觉,,这个时候就要用到tap-highlight-color了。只需要在点击的元素中加一个css样式即可,如下:

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

这个样式还可以设置点击时候的背景色:例如:

-webkit-tap-highlight-color: rgba(240,240,240,0.7);

则可改变元素被点击时背景框的颜色。

另外还有一个设置选中文字颜色的方法。

通常我们选中文字时的背景色是蓝色。我们可以用以下样式去设置网页的选中内容的样式:

::selection { background:#FFF; color:#333; }

::-moz-selection { background:#FFF; color:#333; }

::-webkit-selection { background:#FFF; color:#333;}

如果要去掉选中时的颜色,把background都置为none就行了。

CSS3 修改和去除移动端点击事件出现的背景框

移动端 去除onclick点击事件出现的背景色框的更多相关文章

  1. 去除移动端点击事件出现的背景框 tap-highlight-color

    -webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色 ...

  2. 移动端触摸、点击事件优化(fastclick源码学习)

    移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...

  3. JS 通过点击事件动态添加文本框

    直接拷贝到浏览器就能实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...

  4. fastclick.js解决移动端(ipad)点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  5. 【技术博客】移动端的点击事件与Sticky Hover问题

    目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...

  6. JS 点击事件学习总结

    废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...

  7. jQuery点击事件绑定onClick和on()

    一.静态绑定 (1)onclick方法 jsp代码 <button href="javascript:;" class="weui_btn weui_btn_min ...

  8. js点击事件在苹果端失效的问题

    在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定 ...

  9. 17_点击事件第四种写法_布局文件添加onclick属性

    尽量不要用第四种点击事件的写法.在一万多行代码中发现了一个没被调用的代码 public void call(View v){//第四种写法参数一定是View v //public void call( ...

随机推荐

  1. 自定义 serializeJSON() 函数

    说明:jQuery框架提供了serialize()方法, 能够将DOM元素内容序列化为json格式字符串,用于ajax请求.通过使用serialize()方法,可以提交本页面的所有域. 但是此方法具有 ...

  2. python3基础-set

    集合:无序的,不重复的数据组合 作用: 1.去重,把一个列表变成集合,就自动去重了 2.关系测试,测试两组数据之前的交集.差集.并集等关系 set和dict类似,也是一组key的集合,但不存储valu ...

  3. 使用IDEA的项目上传到GitHub

    使用IDEA的项目上传到GitHub 前提条件: 1.配置好Git(https://jingyan.baidu.com/article/8275fc867b652046a03cf613.html) 2 ...

  4. javascript正则表达式分组捕获理解

    我们先来看一段js代码: var rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/; console.log(rquickExpr.ex ...

  5. program_options

    [program_options] The program_options library allows program developers to obtain program options, t ...

  6. 大数据入门到精通19--mysql 数据导入到hive数据中

    一.正常按照数据库和表导入 \\前面介绍了通过底层文件得形式导入到hive的表中,或者直接导入到hdfs中,\\现在介绍通过hive的database和table命令来从上层操作.sqoop impo ...

  7. win10卸载IE11后从新安装

    win10卸载IE11后想要从新安装,运气不好的话各种坑安装不上,运气好就不说了.这里笔者在知乎看到一种方法,亲测可用,记录如下: 设置--应用--应用和功能--管理可选功能--添加功能--Inter ...

  8. webpack打包优化

    https://www.cnblogs.com/vvjiang/p/9327903.html

  9. PhoenixFD插件流体模拟——UI布局【Dynamics】详解

    流体动力学 本文主要讲解Dynamics折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Dynamics 主要内容 Ov ...

  10. 爬虫学习--MOOC爬取豆瓣top250

    scrapy框架 scrapy是一套基于Twisted的异步处理框架,是纯python实现的爬虫框架,用户只需要定制开发几个模块就可以轻松实现一个爬虫,用来抓取网页内容或者各种图片. scrapy E ...