【发布时间】：2021-12-19 23:49:48
【问题描述】：
请帮帮我，我想在我的按钮上加一个环，它可以在windows浏览器上正常工作，但不能在iphone/ios设备上工作，那么我可以为ios设备做什么？
这是我的代码：
<button class=" rounded-lg appearance-none bg-gray-500 focus:ring-8 focus:ring-gray-500 ring-offset-4 py-2 m-12 ml-12 w-64 ">ring</button>
我在网上写了一个demo，你可以在网站上查看我的代码： https://codepen.io/jesson_king/pen/GRvxjoQ
当我点击按钮时，我想看到一个包围按钮的环，仍然无法在 safari/ios 上运行，但 windows chrome 运行正常
我希望当我点击按钮时，有一个环围住按钮，如下图： https://pbs.twimg.com/media/FDg0hpNUYAYo8JK?format=png&name=small
【问题讨论】：
-
您确定您在问题中提供的代码适用于非 IOS 设备吗？它不适合我（在 Windows 10 Edge 上）使用@GS_ZS 提供的系统（即没有环类）。
-
我认为问题可能与元素是按钮有关。也许焦点在按钮上可能意味着什么尚无定论，因为它通常的工作是将您带到其他地方或以其他方式在单击时执行某些操作，而不是保持专注。如果按钮被替换为内容可编辑的 div，它会在 iOS 上获得焦点，但会一直保持直到焦点移动到其他地方。
-
呃，我喜欢这个戒指，我想在我的手机网站上使用它，但是tailwindcss的作者告诉我这是无法解决的问题，所以我放弃了戒指，并尝试了另一种风格与我的网站.. 在这里检查：github.com/tailwindlabs/tailwindcss/discussions/5998
标签： html css tailwind-css