移动端 去除onclick点击事件出现的背景色框
这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果。但是有的时候我们并不想要这些效果。并且希望点击的时候实现神不知鬼不觉的感觉,,这个时候就要用到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点击事件出现的背景色框的更多相关文章
- 去除移动端点击事件出现的背景框 tap-highlight-color
-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色 ...
- 移动端触摸、点击事件优化(fastclick源码学习)
移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...
- JS 通过点击事件动态添加文本框
直接拷贝到浏览器就能实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...
- fastclick.js解决移动端(ipad)点击事件反应慢问题
参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...
- 【技术博客】移动端的点击事件与Sticky Hover问题
目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...
- JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
- jQuery点击事件绑定onClick和on()
一.静态绑定 (1)onclick方法 jsp代码 <button href="javascript:;" class="weui_btn weui_btn_min ...
- js点击事件在苹果端失效的问题
在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定 ...
- 17_点击事件第四种写法_布局文件添加onclick属性
尽量不要用第四种点击事件的写法.在一万多行代码中发现了一个没被调用的代码 public void call(View v){//第四种写法参数一定是View v //public void call( ...
随机推荐
- 整合MVC实现文件上传
1.整合MVC实现文件上传整合MVC实现文件上传在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,文件上传完毕之后需要将提交的基本信息插入数据库,那么我们来实现这个操作.整个MVC实 ...
- PHP:自己写的mysql操作类
a{ font-weight: bold; display: block; text-align: center; color: #5887bf; font-size: 22px; } .conten ...
- 43_redux_counter应用_使用redux调试用具
1.要在chrome中安装插件 redux-devtools_2_12_1.crx 2.在开发工具注入 npm install --save-dev redux-devtools-extension ...
- React Native: unable to load scripts from assets 'index.android.bundle' on real device
问题:重新建了一个项目后,运行react-native run-android报: unable to load scripts from assets 'index.android.bundle' ...
- mac 环境搭建
安装homebrew jdk 也可以官网下载 maven 官网下载tar.gz包 也在homebrew下安装git,java,mysql.
- 【C++】纯C++实现http打开网页下载内容的功能
#include "stdafx.h" #include <windows.h> #include <iostream> #include "Wi ...
- gradle用户目录本地库移动设置
gradle被越来越多的程序开发人员使用来构件项目代码,使用gradle依赖的第三方jar包有时候非常占空间,默认这样的用户本地库目录(缓存目录)在系统盘上,我们可以修改用户目录到其它盘上 工具/原料 ...
- Python列表的三种遍历(序号和值)的方法
#-×-coding:utf-8-*- if _name_=='_main_': list=['html','js','css','python'] #方法1 print ‘遍历列表方法1’ for ...
- Python设计模式 - UML - 通信图(Communication Diagram)
简介 通信图表示对象之间的消息往来,是表述时序图中信息交互的另一种UML图,介绍完时序图就要对照学习一下通信图,二者是一体两面的. 通信图和时序图可以相互转换,二者的侧重点不同,通信图侧重哪些对象发送 ...
- poj2777(线段树)
题目链接:https://vjudge.net/problem/POJ-2777 题意:有L块连续的板子,每块板子最多染一种颜色,有T种(<=30)颜色,刚开始将所有板子染成颜色1,O次操作(包 ...