去除android浏览器中a、input获得焦点时的高亮边框（outline）

最新推荐文章于 2022-12-06 11:07:05 发布

转载最新推荐文章于 2022-12-06 11:07:05 发布 · 1.6k 阅读

收录于

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

CSS

191 篇文章

订阅专栏

本文提供了一种在Android 4.0及以上版本的浏览器中，去除a/input元素获得焦点时出现的橙色高亮边框的方法。通过结合使用CSS属性，可以实现这一目标。

转自：http://www.ifrans.cn/remove-android-focus-highlight-outline/

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

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

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

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

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

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

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