无法更改尾风V3上的单选按钮背景色

Question

我需要你的人帮助如何改变BG颜色的单选按钮，这是我的代码。

<input type="radio" className="form-radio h-6 w-6 checked:bg-white text-green-500 p-3 my-4" name="radio" value="1" />输出仍然与默认单选按钮相同。在这里输入图像描述

Answer 1

使用：选中属性来实现这一点。

input[type="radio"]:checked {
    background-color: #your-color
}

查看码页中的自定义单选按钮设计。

Answer 2

您必须使用@tailwindcss/forms -一个插件，它为表单样式提供了基本的重置，使表单元素很容易被实用程序覆盖。

• 从npm安装插件：

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms

• 将插件添加到tailwind.config.js文件中：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

• 然后可以使用Tailwind实用工具类：

https://play.tailwindcss.com/6oxQ5F0cXT

根据官方的文档，所描述的解决方案与Tailwinv3.0完全兼容

为了与v3.0兼容，我们所有的第一版插件都已经更新了。

Answer 3

简单地使用Tailwind的文本颜色实用程序示例" text-indigo-600 "，当使用Tailwind的文本颜色实用程序(如text -indigo-600)检查单选按钮时，您可以自定义它的背景色。

例子：

​

<label class="inline-flex items-center">
        <input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked>
        <span class="ml-2">Option 1</span>
 </label>

​

参考资料：https://tailwindcss-custom-forms.netlify.app/