【问题标题】:Can't change radio button background color on Tailwind V3无法更改 Tailwind V3 上的单选按钮背景颜色
【发布时间】:2022-04-06 03:10:27
【问题描述】:

我需要你们帮助如何更改单选按钮的 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" /> 输出仍然与默认单选按钮相同。 enter image description here

【问题讨论】:

    标签: css tailwind-css


    【解决方案1】:

    使用 :checked 属性来实现这一点。

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

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

    【讨论】:

      【解决方案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


      所描述的解决方案完全兼容 Tailwind v3.0 - 据官方docs

      我们所有的第一方插件都已更新以兼容 v3.0

      【讨论】:

        【解决方案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/

        【讨论】:

          猜你喜欢
          • 2011-10-03
          • 2015-01-03
          • 1970-01-01
          • 2013-12-04
          • 1970-01-01
          • 2020-01-01
          • 2022-11-13
          • 2011-06-11
          • 2015-06-04
          相关资源
          最近更新 更多