uniapp微信小程序按钮点击后会出现高亮背景

uniapp yekong

uniapp微信小程序按钮默认是没有高亮的,但是当鼠标点击时会出现高亮。

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
喜欢