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

np8igboo  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(121)

我认为默认的(非透明的)-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>
fwzugrvs

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>

相关问题