我有一个带有如下标签的无线电输入。输入被隐藏,标签用于制作一个视觉上吸引人的圆圈供用户单击。
<input id="choice-yes" type="radio" class="opacity-0 w-0 fixed"/>
<label for="choice-yes" class="transition duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center">Yes</label>
当用户单击标签输入时进行检查。我正在尝试找出如何瞄准这一点,这样我就可以给这个标签带来不同的风格。
这可以在纯 CSS 中使用下一个同级选择器来实现。
input[type="radio"]:checked + label {
background-color: #bfb !important;
border-color: #4c4 !important;
}
我可以使用 tailwind.css 中类似的东西吗?
对于那些希望实现这一点的人,自从引入即时模式(Tailwind CSS v2.1+)以来兄弟选择器变体 https://tailwindcss.com/docs/just-in-time-mode#sibling-selector-variants可用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)