手机网页点击后出现蓝色框

  在手机网页中点击某一个链接或是文本框后通常会在上面出现一个蓝色的透明的框(不同手机颜色有差别)。在网页中可以使用一个css修改这个框的颜色。

  

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

  上述代码中设定颜色为白色,透明度为0。应用之后页面上点击后就看不到原来的那个框了。

  如果需要加到所有元素上就是:

  

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

以下是描述该问题的原文:

In an HTML 5 site a user, who‘s surfing through a mobile device, clicks a link.
The browser draws a box (rectangle) as a feedback (in addition to a sound).
Browser might mean Android 2.3‘s stock browser, or Opera Mobile.

I‘d like to avoid this (blue) box. At least for iPhone and Android based devices. Any idea?

本文原文链接:http://www.cnblogs.com/aser1989/p/4286489.html

时间: 2024-11-09 03:06:28

手机网页点击后出现蓝色框的相关文章

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

jquery.mobile手机网页简要

先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应用程序开发框架推荐 最终选择的是 jQuery Mobile ,官方地址:http://jquerymobile.com jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架.能工作在现有主流的智能手机和平板电脑上,且构建于 jQuery 以及 jQuery UI类库之上,用极少的

手机网页版知乎内容隐藏效果的实现

看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减少了滑动时间,用户体验很好,对整个页面有一个大概的预览,强迫症会感觉很爽. 具体怎么实现这个效果,分析一下: 可以看出来是一个渐变的效果,从上往下颜色变白,我们知道在css3中有两种渐变:线性(linear-gradient)和径向(radial-gradient),很明显这里属于线性渐变. 渐变这

css3和jquery实现的可折叠导航菜单(适合手机网页)

之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个实例由css3和依赖于jquery插件.下面是实现代码 html代码: <nav class="nav" role="navigation" style="height: 195px;"> <ul class="nav-i

【手机网页】手机网页显示图片模糊问题

[本文原创,谢绝转载] [总结] 1.手机浏览器,不管是UC.原生浏览器.safari,显示页面都是按照320px的 2.由于现在手机的宽度都大于320px,所以,图片会模糊 3.像苹果的retina屏幕的方式学习! 先把图片做成两倍长宽的大小,然后通过css样式强制做成原大小 [手机网页]手机网页显示图片模糊问题,布布扣,bubuko.com

支付宝手机网页支付

本节主要描写叙述支付宝手机站点支付,开发网址:productId=2013080604609688" target="_blank">https://b.alipay.com/order/productDetail.htm?productId=2013080604609688,光找这个找了半天,呵呵 在网页中部有四个标签页,选择"技术集成",下载集成开发包,里面有相关的技术文档和三种语言的代码演示样例.代码演示样例中差点儿集成了全部的代码逻辑.cli

手机网页调试利器: Chrome

新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器.(即开发者模式) //==============================================

支付宝手机网页即时到账接口(2)之授权接口请求

前言 这篇文章主要讲诉系统调用支付宝手机网页即时到账授权接口获取支付宝返回的request_token. 上篇文章地址:支付宝手机网页即时到账接口(1)之相关信息介绍. 这是上篇文章结尾调用授权接口的图解. 官方文档中对授权接口的说明是: 商户利用编程方法来模拟http请求远程解析html,获取支付宝返回的结果数据后,可以结合自身网站的业务逻辑进行数据处理. 说明中不难看出我们的代码中需要模拟http提交参数,然后解析支付宝返回的结果再进行处理.该项目是用java编写的,所以后续代码也是用jav

手机网页宽度 , 图片宽度 自适应

网页宽度 页面box不要写宽度或 width:100% 之类的 去掉 头部加上下面代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 图片宽度 <script type="text/javascript"> f