iOS 下 input=text 等输入框，触发时，灰色背景

最开始通过

background:transparent;BACKGROUND-COLOR: transparent; border-style:none;

实现了自定义input背景。

如今在ios上又发现了点击出现灰背景的状况。

首先搜索到的是如下的方法：

-webkit-appearance : none ;

结果惨败，之后找到如下方法：

-webkit-tap-highlight-color: transparent;

终于成功。

延伸

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。 想要禁用这个高亮，设置颜色的alpha值为0即可。

延伸

-webkit-appearance

-webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。-webkit-appearance是用来改变按钮和其他控件的外观，使其外观类似于原生控件。

通常我们可以在相应的元素上加上

-webkit-appearance : none ;

来移除原生控件样式。

参考资料

iOS 下 input=text 等输入框，触发时，灰色背景