React中修改checkbox选中颜色样式不生效如何解决

原生<input type="checkbox">属于浏览器替换元素，选中后的蓝色背景、默认对勾是浏览器内置UA层渲染的，直接给元素设置background-color、border-color无法覆盖原生渲染层级，所以你写的绿色选中样式不会生效。

先通过appearance: none清除浏览器原生checkbox的默认渲染，再完全自定义样式即可，适配你现有styled-components写法的可直接替换代码如下：

import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";

export const CheckBox: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
  props
) => {
  return <Input type="checkbox" {...props} />;
};

const Input = styled.input`
  ${({ theme }) => css`
    /* 清除多内核下的原生checkbox默认样式 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 给定基础尺寸，清除样式后避免元素尺寸异常 */
    width: 16px;
    height: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;

    &:checked {
      background-color: green;
      border-color: green;
      /* 自定义选中状态的白色对勾 */
      &::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }
  `}
`;

关键注意项 #

• 必须同时写通用、webkit、moz内核前缀的appearance: none属性，兼容Chrome、Safari、Firefox等主流浏览器
• 清除原生样式后，默认的白色对勾会一同被清除，需要通过伪元素/背景图自定义对勾样式
• 可以根据需求调整尺寸、颜色、圆角、边框粗细等参数，匹配自身设计规范

• 修改前（默认原生效果）：
• 修改后（预期自定义效果）：

内容的提问来源于stack exchange，提问作者Alpin Cleopatra