我有一个带有如下标签的无线电输入。输入被隐藏,标签用于制作一个视觉上吸引人的圆圈,用户可以点击它。
<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>
Run Code Online (Sandbox Code Playgroud)
当用户点击标签输入时被检查。我想弄清楚如何定位,所以我可以给标签一个不同的风格。
这可以使用下一个兄弟选择器在纯 css 中实现。
input[type="radio"]:checked + label {
background-color: #bfb !important;
border-color: #4c4 !important;
}
Run Code Online (Sandbox Code Playgroud)
我可以改用 tailwind.css 中的类似内容吗?
tailwind-css ×1