通过css tap-highlight-color去除android浏览器中a、input获得焦点时的高亮边框（outline）

分类：Html_Css| 发布：llmaomi| 查看：1268 | 发表时间：2015/5/24

a,input等元素在android原生浏览器下获得焦点时，元素外围会出现一个橙色的高亮边框（如下图）。

若要去除它，通常的办法是：

`1`	`a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); }`

不过看起来，这种方案在android 4.0以上版本的浏览器中是无效的。已知的一种在android 4.0以上版本浏览器中可以移除高亮边框的办法是：

`1`	`a:focus,input:focus{ -webkit-user-modify:read-write-plaintext-only; }`

所以，把上面两种方法结合起来，就是目前一个相对完整的‘去除android浏览器下a/input等元素获得焦点时高亮边框’的解决方案：

1a:focus,input:focus{
2    -webkit-tap-highlight-color:rgba(0,0,0,0); 
3   -webkit-user-modify:read-write-plaintext-only;}

365据说看到好文章不转的人，服务器容易宕机！

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/html-css/2017.html

Photoshop效果转CSS3小插件 - 图层自动转CSS效果 CSS3PS(2015-4-17 10:27:42)
[图+代码]Android如何仿iPhone晃动撤销输入功能(微信摇一摇功能)(2015-3-20 10:28:23)
css2和css3中长度单位px和em,rem的定义与区别(2015-3-18 10:19:26)
移动端浏览器省略号 text-overflow: ellipsis 的兼容性(2015-3-15 10:16:37)
CSS3的30个效果例子：实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦(2015-3-14 19:31:8)
Android（WindowManager、getWindow）动态控制状态栏显示和隐藏的方法实例代码(2014-12-31 11:3:33)
"Hello World"之创建我的第一个Android项目（带图文解说）(2014-12-29 10:33:40)
Android（安卓）监听屏幕的横竖翻转实现方法(2014-12-27 22:2:17)
用媒体采样类库：MediaRecorder来编写Android 录音(2014-12-23 10:53:11)
Android通过点击Wifi物理按键（按键添加和处理）开启/关闭wifi的三个解决方法(2014-12-22 13:7:4)

相关文章