Web笔记··By/蜜汁炒酸奶

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

最开始通过

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

实现了自定义input背景。 如今在ios上又发现了点击出现灰背景的状况。 首先搜索到的是如下的方法:

-webkit-appearance : none ;
1

结果惨败,之后找到如下方法:

-webkit-tap-highlight-color: transparent;
1

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

延伸

-webkit-appearance

-webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。-webkit-appearance是用来改变按钮和其他控件的外观,使其外观类似于原生控件。 通常我们可以在相应的元素上加上

-webkit-appearance : none ;
1

来移除原生控件样式。

参考资料

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

预览
Loading comments...
2 条评论
  • W

    感觉很不错的样子!

example
预览