React.js中checkbox选中后样式不生效，如何自定义选中状态样式？

• 原生<input type="checkbox">属于浏览器内置UI控件，默认样式受厂商限制，未清除默认样式的前提下直接设置background等属性不会生效
• CSS选择器逻辑错误：.checkbox input[type=checkbox]匹配的是类名为checkbox的元素内部的checkbox，而你的checkbox本身就带checkbox类，该选择器永远匹配不到元素
• 未给checkbox设置appearance: none清除默认渲染规则，自定义样式无法覆盖原生表现
• 额外检查：需确认你的isChecked事件处理函数正确修改了this.state.isChecked状态，若状态未更新，checked属性不变，自然不会触发:checked选择器

1. React代码修改 #

<div className='check'>
  <input
    type='checkbox'
    className='checkbox'
    id='termschkbx'
    checked={this.state.isChecked}
    onChange={() => this.setState({isChecked: !this.state.isChecked})} // 可替换为你自己的isChecked方法，确保状态正常切换
  />
  <label htmlFor="termschkbx">
    I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> 
  </label>
</div>

2. CSS代码修改 #

.checkbox{
  top: -2px;
  left:-45px;
  width: 21px;
  height: 21px;
  margin-left:12px;
  position: absolute;
  /* 核心：清除浏览器默认样式 */
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  /* 未选中状态基础样式 */
  border: 2px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

/* 选中状态样式 */
.checkbox:checked{
  background: #DE1F48;
  border-color: #DE1F48;
}

/* 选中后显示对勾标记 */
.checkbox:checked::after{
  content: "✓";
  display: block;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 21px;
}

• 新增appearance: none清除浏览器默认checkbox渲染规则，允许自定义样式生效
• 删除无效的.checkbox input[type=checkbox]选择器
• 补充checkbox默认状态的边框、背景样式，保证未选中状态可见
• 新增选中后的对勾样式，用伪元素::after实现勾选标记
• 用label关联checkbox id，点击文字也可以切换选中状态，提升交互体验

内容的提问来源于stack exchange，提问作者Sritharni CN