iOS设备上移除默认的 active 样式

有的时候我们并不想要浏览器的自定义样式，比如button的点击active状态，一般来说会这么设置，

input::-moz-focus-inner{border:none}
button{
        -moz-appearance: none;
        -webkit-appearance: none;
}
 input,button,select,textarea{outline:none;}

但在iOS设备上并不起效，搜索后，发现可以通过添加一段js来解决，

document.addEventListener("touchstart", function() {},false);

另一个方案，可以在 body 上添加 ontouchstart=""

<body ontouchstart="">

原理：Safari 默认禁用了元素的 active 样式，我们通过声明 touchstart 来覆盖默认事件，就可以让 active 样式重新激活。

此外，默认点击按钮会有一个灰色的外框，通过这段 CSS 可以清除：


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

metroluffy / blog

iOS设备上移除默认的 active 样式 #12