改变ios input样式

原文地址

IOS 下 input[type=’tel’],input[type=’text’]输入框，在触发的时候，input会有一个灰色的背景色块，一闪而过，网上搜素了很多关键字，都一无所获，后来跟ios的开发同学聊了一下，他说ios有个原生的 highlight 的熟悉，原来如此。

-webkit-tap-highlight-color

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

-webkit-tap-highlight-color: transparent;

 

至此，解决问题，but。。。

在这个过程中，发现另外一个 css 属性，

-webkit-appearance

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

关于这个属性以前写过 解决iOS下无法正常渲染按钮的问题 ，问题产生的原因是，iOS下的safari中有默认的按钮样式：

1. input[type=“button”], input[type=“submit”], input[type=“reset”] {
2. -webkit-appearance: push-button;
3. white-space: pre;
4. }

其中-webkit-appearance: push-button;就是将按钮设置成iOS中默认原生控件的样式。

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

1. -webkit-appearance : none ;

来移除原生控件样式。

其他几个比较有用的情况是，当我们希望某些元素设置成默写系统原生控件的样式的时候，例如下面的span标签设置成各种控件的样式：

按钮

这个是类似与input type = search 时，右边会出现一个小叉叉，太神奇了
等等