React中自定义checkbox的hover、focus样式不生效如何解决

效果参考：

问题原因 #

现有代码存在4处直接导致效果失效的错误：

• hover选择器语法错误：input[type=checkbox] + label.btn :hover选择器多写了一个空格，实际匹配的是label内部子元素的悬停状态，根本没有选中目标元素
• 样式挂载对象错误：自定义复选框的视觉样式全部写在input元素上，但悬停、聚焦效果却写在了label的选择器下，样式不会生效
• 长度单位缺失：选中状态下的top: 6没有写px单位，浏览器无法解析该属性
• 聚焦样式被主动清空：:focus选择器下写了box-shadow: none，直接把聚焦时的阴影效果覆盖了

原有代码 #

React 片段 #

<div className='myclass'>
    <div className='checkbox-container'>
    <input id='a1' type='checkbox' checked={checked} onChange={handleChecked} 
    className={'my-custom-input-label-box'}/>
    <label htmlFor='a1' className='btn'>A1</label>
</div>

原有CSS片段 #

.myclass{
  display:flex;
  flex-direction:row;
  
}

.checkbox-container{
  display:flex;
  flex-direction:column;
  }

  input[type="checkbox"]{
    display:flex;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: url(./img/barStool.png);
    background-size: cover;
    border-radius: 1px;
    box-sizing: border-box;
    position: relative;
    box-sizing: content-box ;
    width: 50px;
    height: 70px;
    border-width: 0;
    transition: all .3s linear;
    }
    input[type="checkbox"]:checked{
      background-color: #2ECC71;
      top: 6;
      background: url(./img/seat.png);
      background-size: cover;
    }
    input[type="checkbox"]:focus{
      outline: 0 none;
      box-shadow: none;
    }
    input[type=checkbox] + label.btn :hover{
      box-shadow: 0 4px #ab3c3c;
      top: 2px;
      background-color: #4b15e0;
      }

修复后代码 #

直接替换原有CSS即可，核心修改就是修正选择器、补全单位、把对应交互样式挂载到正确的input元素上：

.myclass{
  display:flex;
  flex-direction:row;
  gap: 16px; /* 按需调整多个复选框之间的间距 */
}

.checkbox-container{
  display:flex;
  flex-direction:column;
  align-items: center;
}

input[type="checkbox"]{
  display:flex;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: url(./img/barStool.png);
  background-size: cover;
  border-radius: 1px;
  position: relative;
  box-sizing: content-box ;
  width: 50px;
  height: 70px;
  border-width: 0;
  transition: all .3s linear;
}

/* 选中状态 补全px单位 */
input[type="checkbox"]:checked{
  background-color: #2ECC71;
  top: 6px;
  background: url(./img/seat.png);
  background-size: cover;
}

/* 聚焦状态 自定义聚焦阴影 */
input[type="checkbox"]:focus{
  outline: 0 none;
  box-shadow: 0 0 0 2px #4b15e0; /* 可自行调整聚焦边框的颜色、尺寸 */
}

/* 悬停状态 修正选择器直接作用于复选框 */
input[type="checkbox"]:hover{
  box-shadow: 0 4px #ab3c3c;
  top: 2px;
  background-color: #4b15e0;
}

/* 可选优化：避免label阻挡点击事件，点击文字也能触发选中 */
.checkbox-container .btn {
  margin-top: 8px;
  pointer-events: none;
}

替换后即可正常实现预期交互：鼠标悬停复选框时出现阴影、上移和背景色变化，键盘聚焦复选框时显示聚焦轮廓，选中状态正常加载座椅图片。

内容的提问来源于stack exchange，提问作者Ryan Fonseka