出于可访问性的目的,我想仅当用户使用键盘点击元素时才在元素周围添加红色环。我似乎无法在 Tailwind 中找到正确的属性来完成此操作。
我尝试通过
focus
伪类应用环,但这使得当用户单击按钮以及使用键盘上的选项卡时出现环。
<button
type="button"
class="
inline-flex items-center justify-center w-full rounded-md
px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700
focus:outline-none focus:ring focus:ring-red-200
active:bg-gray-100 active:text-gray-800
transition ease-in duration-150
"
>
Press me
</button>
您应该能够通过使用
focus-visible
修饰符来获得该效果。
例如:
class='focus:outline-none focus-visible:ring'
。
我有同样的问题 - 焦点环应该只显示为对 Tab 键导航的支持,但当用户单击表单字段时则不显示。目前还没找到好的解决办法。