标签不合适的自定义复选框答案

【问题标题】：Custom checkbox with label not fitting标签不合适的自定义复选框
【发布时间】：2020-12-22 09:10:12
【问题描述】：

我尝试构建自己的复选框，看起来像一个按钮并找到各种解决方案，但设计仍然不好，因为其中一个元素没有正确显示

如下图所示，一旦选择了图片，橙色背景并没有覆盖整个按钮看起来不错。

我尝试修复它，但大多数时候，我破坏了设计

import React from 'react';
import './CheckboxButton.css';

class CheckboxButton extends React.Component {

    render(){
        return(
            <div id="ck-button">
                <label>
                    <input type="checkbox" value="1" hidden/><span>{this.props.text}</span>
                </label>
            </div>
        )
    }
}
export default CheckboxButton;

css 是：


 
 #ck-button {
     margin:3px;
     background-color: transparent;
     overflow:auto;
     float:left;
     box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
     border-radius: 21px;
     border: solid 2px #ff7255;

 }
 
 #ck-button label {
     float:left;
     width: fit-content;
     padding: 1px 10px 0px 10px;
     font-family:Source Sans Pro;
     font-size: 18px;

 }
 
 #ck-button label span {
    text-align:center;
     padding:0px 0px;
     display:block;
     color: #ff7255;
 }
 
 #ck-button label input {
     position:absolute;
     top:-20px;
 }
 
 #ck-button input:checked + span {
     background-color:#ff7255;
     color:#fff;
     font-weight: bold;
 }

知道如何将完整按钮设为橙色吗？

【问题讨论】：

将background-color: transparent; 更改为除transparent 之外的任何内容？
如果您想让按钮的背景为橙色，为什么要在按钮中设置transparent 背景？您可以使用一些 javascript 在单击时切换按钮的颜色，即使在 css 中使用 :hover 或 :active 我猜也应该能够做到这一点

标签： javascript css reactjs react-bootstrap

【解决方案1】：

经验法则，在创建自定义复选框时，始终将样式应用于可点击元素。（在你的情况下span）

#ck-button {
  margin: 3px;
  background-color: transparent;
  overflow: auto;
  float: left;
  position: relative;
}

#ck-button span {
  box-shadow: 0px 8px 18px 0 rgba(0, 0, 0, 0.14);
  border-radius: 21px;
  border: solid 2px #ff7255;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  color: #ff7255;
  user-select: none;
}

#ck-button label input {
  position: absolute;
  top: -20px;
}

#ck-button input:checked+span {
  background-color: #ff7255;
  color: #fff;
  font-weight: bold;
}

<label id="ck-button">
   <input type="checkbox" value="1" hidden/>        <span>text</span>
  </label>

【讨论】：