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

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>

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

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

您可以使用类强调色

使用accent-{color}实用程序来更改对象的强调色 元素。这对于样式元素（例如复选框和 通过覆盖浏览器的默认颜色来进行单选组。

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

Answer 2

使用文本颜色更改选中时的复选标记和未选中时的背景

className="absolute h-6 w-6 accent-gray-700  bg-grey-700 text-red-500  rounded cursor-pointer"

Answer 3

<input
    type="checkbox"
    className="checked:bg-sky-700"
    checked={true}
/>

Answer 4

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

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

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

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

Answer 5

试试这个：

className="absolute h-6 w-6 accent-gray-700 cursor-pointer"

Answer 6

Accent 也不适合我，但在你的 css 中你可以覆盖它：

[type=checkbox]:checked {
background-image: none; /*to remove the tickmark when checked*/
background-color: #1e3; /* change the color when checked */`
}

Answer 7

您可以使用带有过滤器的技巧。

<input type="checkbox" class="invert checked:invert-0 accent-gray-700">