如何在样式组件中更改类型复选框样式的输入答案

【问题标题】：How to change input of type checkbox styling in Styled Components如何在样式组件中更改类型复选框样式的输入
【发布时间】：2023-02-22 17:00:57
【问题描述】：

具有以下输入元素：

<StyledSelectionBoxInput
  type="checkbox"
  data-testid="radio"
  name={option.name}
  value={option.value}
  id={option.value}
  checked={defaultChecked}
  {...rest}
/>

及其相应的样式化组件：

export const StyledSelectionBoxInput = styled.input`
  cursor: pointer;
  height: 2rem;
  width: 2rem;
`;

现在它看起来像默认的复选框，未选中时为白色背景，选中时为蓝色背景。我怎样才能改变这些颜色？例如，未选中时背景为绿色，选中时背景为粉红色？

我试过 :checked 但没有成功：

export const StyledSelectionBoxInput = styled.input`
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  &:not(:checked) {
    background-color: green;
  }
  &:checked {
    background-color: pink;
  }
`;

有任何想法吗？

【问题讨论】：

您只能对复选框进行一些自定义，我认为您要查找的属性是 accent-color: green 而不是 background-color: green

标签： javascript html css reactjs styled-components

【解决方案1】：

看看this guide。您的问题是，复选框本身的呈现由浏览器控制（并且浏览器之间有所不同）。如果你想自定义外观，你需要隐藏默认渲染并提供你自己的

【讨论】：