英文:
Tailwindcss: How to focus-within and focus-visible at the same time
问题
只需要翻译代码部分，以下是翻译好的内容：
<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">可聚焦的按钮</button>
</div>
</div>
希望这对你有所帮助。如果你有其他问题，可以继续提问。
英文:
I want to focus a div surrounding a button but only when keyboard focused. Usually focus-within works, but in this case it should only focus on keyboard focus (focus-visible:) and not when clicking with the mouse(focus:).
Essentially, I need to combine focus-within and focus-visible. How can this be done?
Tailwind Play: 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>
Notes:
- Based on this thread, it looks like w3c doesn't have support for
focus-within-visible. What's an alternative or round-about way to achieve this? - It looks like there is support for
:has(:focus)selector in some browsers but how should this be applied in Tailwind...? Source
答案1
得分: 7
你确实可以使用 :has 与 :focus-visible 来实现你想要的效果。在 caniuse 上检查浏览器支持情况。
使用 arbitrary variants 来构建你的选择器：
<div class="[&:has(:focus-visible)]:ring-4">
<button>可聚焦的按钮</button>
</div>
英文:
You can indeed use :has with :focus-visible to achieve what you want. Check the browser support on caniuse.
Use arbitrary variants to build your selector:
<div class="[&:has(:focus-visible)]:ring-4">
<button>Focusable button</button>
</div>
答案2
得分: -1
Instead of using focus-within you could add relative to the div you want to make look focused with the ring. Then make the button a peer and have an absolutely positioned div after it use the peer-focus-visible modifier to add any "focused" styles you want.
EDIT: You'll need to make the div be behind the button by adding relative to the button and assigning an appropriate z-index value to both the inset div and button.
<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>
</div>
Here is an edited example on Tailwind Play: Link
英文:
Instead of using focus-within you could add relative to the div you want to make look focused with the ring. Then make the button a peer and have an absolutely positioned div after it use the peer-focus-visible modifier to add any "focused" styles you want.
EDIT: You'll need to make the div be behind the button by adding relative to the button and assigning an appropriate z-index value to both the inset div and button.
<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>
</div>
Here is an edited example on Tailwind Play https://play.tailwindcss.com/us5kpJg6cV
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论