在顺风css中单击一次后，聚焦一组按钮
在顺风css中单击一次后，聚焦一组按钮
提问于 2022-09-26 06:52:58
我有四排三颗纽扣。
顺风播放链接
我想要的是
当我单击第一行中的3个按钮中的任何一个时，单击下一行的3个按钮中的任意一个，如果我单击这些行中的任何一个按钮，也可以单击最后两个行中的任意一个按钮。
它们所有的点击按钮都应该保持高亮显示。
如何在顺风css中实现这一点。
我的研究
我已经搜索并找到了focused状态，但是一旦我单击第二行中的任何按钮，突出显示的内容就会在前一行中选择的按钮中消失。
我的密码
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-6">
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login21</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login22</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login23</button>
</div>
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login31</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login32</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login33</button>
</div>
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login41</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login42</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login43</button>
</div>
<div class="bg-slate-50 px-28 ">
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login51</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login52</button>
<button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login53</button>
</div>
</div>顺风播放链接
是否可以只使用tailwindCSS或css？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-26 09:04:26
我用inputtype=radio修复它
参见尾风播放中的HTML和CSS：https://play.tailwindcss.com/ALXtlFabvI
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73850475
复制相关文章
相似问题
腾讯云开发者
