Tailwindcss: Как сфокусироваться внутри и сфокусироваться одновременно
Я хочу сфокусировать div вокруг кнопки, но только когда сфокусирована клавиатура. Обычно focus-within работает, но в этом случае он должен фокусироваться только на фокусе клавиатуры (focus-visible:), а не при щелчке мышью (focus:).
По сути, мне нужно объединить focus-within и focus-visible. Как это может быть сделано?
Игра Tailwind: 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>
Примечания:
- Основываясь на этой ветке, похоже, что w3c не поддерживает
focus-within-visible. Какой альтернативный или обходной способ добиться этого? - Похоже, что в некоторых браузерах есть поддержка селектора
:has(:focus), но как его применить в Tailwind...? Источник
Ответы 1
Вместо использования focus-in вы можете добавить relative к div, который вы хотите сделать сфокусированным с помощью кольца. Затем сделайте кнопку peer и добавьте абсолютно позиционированный div после него, используя модификатор peer-focus-visible, чтобы добавить любые «сфокусированные» стили, которые вы хотите.
Обновлено: вам нужно сделать div за кнопкой, добавив относительно кнопки и назначив соответствующее значение z-index как вставному 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
Ах, да, проблема с z-индексом. Обновленный ответ.
Спасибо. Это почти так, но кнопку больше нельзя нажимать, потому что div находится поверх кнопки...