css3 -webkit-tap-highlight-color

起因

做微信公众号页面,用了select 标签,没加任何样式,在iphone上点击选择select下拉框的时候会先出现半透明的灰色背景,然后才出现下拉框,巨丑啊。

解决办法

给select设置如题的属性,值设置为rgba(0,0,0,0),恩,好了,哇哈哈~~~

完整写法就是:-webkit-tap-highlight-color:rgba(0,0,0,0);

具体介绍

1、适用系统
      1)iOS (iPhone和iPad)
      2)大部分android手机也是支持的,只是显示效果有所不同。

2、语法介绍
      -webkit-tap-highlight-color: color | transparent
      -webkit-tap-highlight-color,意思即点击(tab)的高亮(highlight)颜色(color),颜色用数值调节,可以只设置透明度transparent,如果未设置透明度,iOS使用默认的透明度

3、RGBA
       RGBA??什么鬼?恩,有点熟悉,比RGB多了一个A。恩,对,这个A就是Alpha,透明度的意思啦,取值0-1。其他和RGB一样的用法,只是多了一个颜色透明度的设置,很方便吧,大部分主流浏览器都支持哦。

4、禁用tap highlighting
      设置alpha值为0 (invisible)就ok

5、对于windows phone, 还需要
      <meta name="msapplication-tap-highlight" content="no" />

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容