如何更改 Tailwind 中自定义复选框的背景颜色

Question

我使用 tailwind 创建了一个自定义复选框（作为反应项目中的组件）。现在我想在选中之前和选中之后更改复选框的背景颜色。这就是我要的：

这是当前的外观：

我想知道如何更改tailwind.css中的颜色 这是复选框代码：

<div className="check-box">
    <input type="checkbox"
         value={ value }
         id={ id }
         name={ name }
         onBlur={ onBlur }
         className="absolute h-6 w-6 cursor-pointer" onChange={ onChange } />
                    
     <div className="bg-xaplink_gray_1 border-2 border-   xaplink_gray_3 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-xaplink_black_2">
        <svg className="fill-current hidden w-4 h-4 text-xaplink_white pointer-events-none" version="1.1" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fillRule="evenodd">
              <g transform="translate(-9 -11)" fill="#FFFF" fillRule="nonzero">
                  <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
              </g>
          </g>
         </svg>
  </div>
</div>

这是我在反应中的复选框组件：

import React, { useEffect, useState }  from "react";
const XCheckBox = ({ value, id, name, onBlur,label, side, error, touched, onChange }) => {
    
    return (
        <>
           <div className=" flex flex-row gap-5 py-2">
               <div className="check-box">
                   <input type="checkbox"
                          value={ value }
                          id={ id }
                          name={ name }
                          onBlur={ onBlur }
                          className="absolute h-6 w-6 cursor-pointer" onChange={ onChange } />
                    <div className="bg-xaplink_gray_1 border-2 border-xaplink_gray_3 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-xaplink_black_2">
                        <svg className="fill-current hidden w-4 h-4 text-xaplink_white pointer-events-none" version="1.1" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
                            <g fill="none" fillRule="evenodd">
                                <g transform="translate(-9 -11)" fill="#FFFF" fillRule="nonzero">
                                    <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                                </g>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
            <div>
                { touched && error ? (
                    <p className="text-xs pl-2 text-xaplink_red_2 mb-4">{ error }</p>
                ) : null }
            </div>
        </>
    );
};

export default XCheckBox;

Answer 1

您可以使用类强调色

\n

\n

使用accent-{color} 实用程序更改\n元素的强调色。这对于通过覆盖浏览器\xe2\x80\x99s 默认颜色来设置复选框和\n单选组等元素的样式很有帮助。

\n

\n

<input type="checkbox" class="accent-pink-300" />\n

\n

Answer 2

不清楚您是否只想更改复选框的背景颜色或删除其复选标记。

无论如何，复选框输入的默认样式包含复选标记，您可以根据需要创建自定义输入。

如果您想删除复选标记，您可以使用下面的沙箱创建自定义复选框。 没有复选标记的自定义复选框

如果你想要一个复选标记，你可以根据你的主题使用 tailwindCss 实现跟随样式。带有复选标记的自定义复选框