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

移动端开发的一个很大的好处就是可以不管讨厌的IE浏览器的兼容性,只需要页面在火狐等一些高级浏览器中正常显示就行。
最近在写一些移动端的页面,刚好在今天遇到了这么一个神奇的css特性。那就是tap-highlight-color

这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果。但是有的时候我们并不想要这些效果。并且希望点击的时候实现神不知鬼不觉的感觉,,这个时候就要用到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就行了。

时间: 2024-11-15 13:10:15

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

CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)

-webkit-tap-highlight-color 这个属性是用于设定元素在移动设备(如Adnroid.iOS)上被触发点击事件时,响应的背景框的颜色. 例如在Adnroid版本的微信中,点击a标签时将会出现一个橙色的小框表示点击的响应. 此时,如果对元素设置了tap-highlight-color值,例如: -webkit-tap-highlight-color: rgba(240,240,240,0.7); 则可改变元素被点击时背景框的颜色. 如果需要背景框不显示,则可以将rgba中的a

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

-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景.要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色. 想要禁用这个高亮,设置颜色的alpha值为0即可. 示例:设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支持:

后台找到repeater里面的div并添加客户端点击事件

public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCreated 找到repeater里面的div并添加客户端点击事件div要加上runat="server" id="itemTy" onclick="test" 后台: protected void Repeater2_ItemCreated(objec

怎么去除移动端点击a标签链接时的背景色

在手机端点击链接时会发现有一个背景色,有时候需要改变这个颜色,或者去除这个颜色,有时候a标签做成按钮时这个颜色的存在会很丑,像这样: 可以通过 -webkit-tap-highlight-color: rgba(0,0,0,0); 来去除这个高亮,这样在移动端点击按钮时就不会再有这个问题了

移动端点击事件全攻略,有你知道与不知道的各种坑

看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都会面临点击事件的第一个问题:click事件的300ms延迟响应.不能立即响应给体验造成了很大的困扰,因此解决这个问题就成为了必然. 这个问题的解决方案就是: zepto.js的tap事件.tap事件可以理解为在移动端的click事件,而zepto.js因为几乎完全复制jQuery的api,因此常常被用在h5的开发上用来取代jquery.

fastclick.js --- 解决移动端点击事件300ms延时

Fast Click 是一个简单.易用的库,专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时. 为什么会存在延迟呢? 从你触摸按钮到触发点击事件,移动端浏览器会等待接近300ms,原因是浏览器会等待以确定你是否执行双击事件 兼容性 Mobile Safari on iOS 3 and upwards Chrome on iOS 5 and upwards Chrome on Android (ICS) Opera Mobile 11.5 and upwards Android B

移动端点击事件全攻略

接触过移动端开发的同学可能都会面临点击事件的第一个问题:click事件的300ms延迟响应.不能立即响应给体验造成了很大的困扰,因此解决这个问题就成为了必然. 这个问题的解决方案就是:zepto.js的tap事件.tap事件可以理解为在移动端的click事件,而zepto.js因为几乎完全复制jQuery的api,因此常常被用在h5的开发上用来取代jquery. 由于模块化的原因,导致有的同学下载的zepto.js的模块并不全,造成了一大堆悲剧,以为zepto.js不支持一些方法,所以,下载的时

js-解决移动端点击事件的延迟问题

众所周知,在手机上的点击事件会有延迟300ms的问题.但在做手机端某些点击小游戏时,我们就需要取消这个延迟的问题: 第一步:禁止页面的缩放 <meta name="viewport" content="width=device-width user-scalable= 'no'"> 这块内容能解决一些部分手机的问题 第二步: fastclick.js FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量

fastclick消除移动端点击事件延迟

在移动浏览器中,当你点击按钮的单击事件时,将会等待大约300ms的时间.这是因为,浏览器是等着看,如果你是真正执行双击. 示例demo: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal