uniapp微信小程序按钮默认是没有高亮的,但是当鼠标点击时会出现高亮。
-webkit-tap-highlight-color
是一个 CSS 属性,用于设置在 iOS 和其他 WebKit 浏览器中,当用户点击一个可点击元素时显示的高亮颜色。这个属性可以自定义点击高亮颜色,或者完全禁用这种效果。
介绍
-webkit-tap-highlight-color
属性允许开发者修改或禁用网页上的默认点击高亮行为。其语法如下:
-webkit-tap-highlight-color: <css-color>;
- 这是一个继承属性,改变点击高亮颜色,并遵循 alpha 值。
- 如果未指定 alpha 值,iOS 上的 Safari 会应用默认的 alpha 值。
- 要禁用点击高亮效果,可以将 alpha 值设置为
0
(不可见)。 - 如果将 alpha 值设置为
1.0
(不透明),则元素在点击时不会可见。
示例
以下示例展示了如何更改点击高亮颜色:
<html>
<head>
<meta name="viewport" content="width=200">
</head>
<body>
<a href="whatever0.html">默认高亮颜色</a><br><br>
<a href="whatever0.html" style="-webkit-tap-highlight-color:rgba(200,0,0,0.4);">自定义高亮颜色</a>
</body>
</html>
在这个示例中,第一个链接使用默认的点击高亮颜色,第二个链接使用自定义的红色高亮颜色,alpha 值为 0.4
。
去除点击高亮效果
要完全去除点击高亮效果,可以将 -webkit-tap-highlight-color
设置为透明:
-webkit-tap-highlight-color: rgba(0,0,0,0);
例如:
<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);">测试点击效果</button>
在这个示例中,当按钮被点击并按住时,不会出现周围的透明灰色高亮颜色。
注意事项
- 改变这种行为不会影响用户长按时显示的信息气泡的颜色。
- 在 iOS 上,鼠标事件发送得非常快,以至于
:active
伪状态只有在 HTML 元素上设置了触摸事件时才会触发,例如ontouchstart
。