javascript - 自定义复选框标签不合适

Question

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

正如您在下图中看到的，选择图像后，oragne 背景不会覆盖整个按钮，看起来不错。

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

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;
 }

知道如何将整个按钮变成橙色吗？

Answer 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>