css 尾风：如何同时聚焦内部和聚焦可见

cgh8pdjw 于 2023-02-10 发布在其他

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

我想聚焦一个按钮周围的div，但只有当键盘聚焦时。通常focus-within工作，但在这种情况下，它应该只聚焦键盘焦点（focus-visible:），而不是当用鼠标单击时（focus:）。
从本质上讲，我需要将focus-within和focus-visible结合起来，如何才能做到这一点？
顺风打法：https://play.tailwindcss.com/ApDB5gSjqv

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300">
    <button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
  </div>
</div>

注：

基于this thread，w3c似乎不支持focus-within-visible，有什么替代或迂回的方法来实现这一点呢？
看起来有些浏览器支持:has(:focus)选择器，但如何在Tailwind中应用呢？Source

css

来源：https://stackoverflow.com/questions/75365592/tailwindcss-how-to-focus-within-and-focus-visible-at-the-same-time

1条答案

按热度按时间

yks3o0rb1#

除了使用focus-within之外，你还可以在div中添加relative，使其看起来像是用圆环聚焦的，然后将按钮设置为peer，并在其后面添加一个绝对定位的div，使用peer-focus-visible修饰符添加任何你想要的“聚焦”样式。
编辑：您需要通过添加相对于按钮的内容并为inset div和按钮分配一个适当的z索引值来使div位于按钮后面。

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 relative">
    <button class="bg-green-200 px-6 py-3 focus:outline-none peer relative z-[1]">Focusable Button</button>
  <div class="absolute inset-0 rounded-lg peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 z-[0]"></div>
</div>

下面是一个关于Tailwind Play https://play.tailwindcss.com/us5kpJg6cV的编辑示例

赞(0）回复(0）举报 2023-02-10

我来回答

css 尾风：如何同时聚焦内部和聚焦可见

1条答案

相关问题

热门标签

最新问答