在开发微信H5的时候,发现在iOS 上<wx-open-launch-app/> 组件点击有灰色半透明效果,有也行,但我的按钮是圆角,这个效果设置圆角一直不生效。
因为只在iOS 真机上出现,十分难调试,官方的开发工具切换为iOS 也没这个效果。另外<wx-open-launch-app/> 上一个自定义组件,也不确定这个效果是否能去掉,花了很多时间。
后来查到iOS 上有一个-webkit-tap-highlight-color 属性,置为透明能去除这个效果。于是看了下自己用的UI 库arco,确实设置了这个属性。<wx-open-launch-app/> 不生效可能是因为CSS 隔离了。
经过多番测试,这段代码终于去掉了这个点击的灰色效果。
*{ -webkit-tap-highlight-color: transparent; tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; appearance: none; }
完整代码
<wx-open-launch-app id='launch-btn' style="position:absolute;top:0;left:0;right:0;bottom:0;border-radius: 20px;" extinfo='${extinfo}' appid="appid" > <template> <style> .wx-btn{ width:100%; height: 40px; border-radius: 20px; } *{ -webkit-tap-highlight-color: transparent; tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; appearance: none; } </style> <div class="wx-btn"></div> </template> </wx-open-launch-app>