我看到可以启用 TailwindCSS
checked:
变体以在选中时更改输入元素,但是如何在选中时更改输入的标签?
这里是相关的 Tailwind CSS docs.
下面的示例代码。
在
tailwind.config.js
中启用变体后,将checked:bg-green-300
放在div或标签中不起作用。它仅适用于输入。
<div>
<label>
<input checked type="radio" name="option1" id="option1" className="hidden" />
<div>option1</div>
</label>
<label>
<input checked type="radio" name="option2" id="option1" className="hidden" />
<div>option2</div>
</label>
</div>
编辑:随着2.2+版本的发布,它内置了对称为
peer
的兄弟选择器变体的支持(观看更新release)
此功能仅适用于即时模式。
<label>
<input checked type="radio" name="option" id="option1" class="hidden peer" />
<div class="peer-checked:bg-red-600">option1</div>
</label>
对于 2.2 以下的版本: 您需要编写自己的插件来添加新变体。更多信息在这里
比如,我们给它起个名字
label-checked
tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {},
variants: {
extend: {
backgroundColor: ['label-checked'], // you need add new variant to a property you want to extend
},
},
plugins: [
plugin(({ addVariant, e }) => {
addVariant('label-checked', ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) => {
const eClassName = e(`label-checked${separator}${className}`); // escape class
const yourSelector = 'input[type="radio"]'; // your input selector. Could be any
return `${yourSelector}:checked ~ .${eClassName}`; // ~ - CSS selector for siblings
}
)
})
}),
],
};
这个配置应该适用于下一个案例(我们扩展了 backgroundColor,所以它应该适用于 bg-color 类):
1 - label 是包装器,它的文本应该包装在任何选择器中(在本例中为 div)
<label>
<input checked type="radio" name="option1" id="option1" class="hidden" />
<div class="label-checked:bg-red-600">option1</div>
</label>
2 - 标签after input
<input checked type="radio" name="option1" id="option1" class="hidden" />
<label for="option-1" class="label-checked:bg-red-600"></label>
根据 tailwind 2.2.0 使用对等类
<input type="checkbox" name="themeToggler" id="themeToggler" class="peer" />
<label for="themeToggler" class="w-10 h-10 bg-gray-400 peer-checked:bg-red-400"></label>
Tailwind 的 peer class 是解决这个问题的现代方法。
您可以通过向 HTML 添加两个类来添加对等行为。
查看详细示例here
在 Tailwind CSS 3.0 中,您可以像这样创建自定义单选按钮
<div class="p-3 h-screen w-full flex justify-center items-center bg-black">
<div class="w-full">
<div class="flex">
<p class="text-[20px] text-white">Which of the following is an asian country?</p>
</div>
<div class="md:grid grid-cols-12 gap-3 pb-4 w-full">
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-1" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-1" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">India</label>
</div>
</div>
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-2" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-2" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">Australia</label>
</div>
</div>
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-3" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-3" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">USA</label>
</div>
</div>
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-4" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-4" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">Germany</label>
</div>
</div>
</div>
</div>
检查这个运行示例 - https://bbbootstrap.com/snippets/custom-radio-button-91048657