css 圆角-webkit-tap-highlight-color区域

np8igboo 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(122)

我认为默认的（非透明的）-webkit-tap-highlight-color是在进行复杂的DOM操作之前对用户的触摸做出React的最快方式，这在较旧、较慢的设备上尤其明显。
据我所知，border-radius规则并不适用于点击高亮显示。是否还有其他方法可以对圆形按钮这样的元素进行高亮显示？

button {
  appearance: none;
  border: none;
  padding: 1em 2em;
  border-radius: 2em;
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}
button:active {
  color:red;
}

<button>Enter</button>

css

来源：https://stackoverflow.com/questions/69509565/rounded-corners-of-webkit-tap-highlight-color-area

1条答案

按热度按时间

fwzugrvs1#

我刚刚在Google上看到这个，但不知道它是如何工作的，它基本上就是overflow: hidden + flex-grow: 1

div {
    display: inline-flex;
    overflow: hidden;

    border-radius: 2em;
}

button {
    flex-grow: 1;

    border: none;
    padding: 1em 2em;

    cursor: pointer;
}

<div>
    <button>Test</button>
</div>

赞(0）回复(0）举报 2022-12-15

我来回答

css 圆角-webkit-tap-highlight-color区域

1条答案

相关问题

热门标签

最新问答