技術標籤：css

check/radio選擇框樣式修改為圈圈

選中為點

html：

            <div className="checkbox-area">
              <input type="checkbox" name="chooseType" id="chooseType1" className="Checkbox" onChange={() => this.onChange(0)}/>
              <label htmlFor="chooseType1" className="checkbox-label" style={{ display: 'inline-block'}}></label>
              <div>通過</div>
            </div>
            <div className="checkbox-area">
              <input type="checkbox" name="chooseType" id="chooseType2" className="Checkbox" onChange={() => this.onChange(1)}/>
              <label htmlFor="chooseType2" className="checkbox-label" style={{ display: 'inline-block'}}></label>
              <div>待稽核</div>
            </div>
 

css：

如果是radio就把checkbox修改為radio

.checkbox-area{
    width: 80px;
    position: relative;
    display: flex;
    label {
      left: -1px;
      top: 8px;
      border-radius: 50%;
      border: 1px solid #c60c20;
    }
    .checkbox-label{
      width: 15px;
      height: 15px;
      margin-top: 12px;
    }
    input[type="checkbox"] {
      width: 10px;
      height: 20px;
      opacity: 0;
    }
    input:checked+label {
      border: 1px solid #c60c20;
    }
    input[type="checkbox"]:checked+label::before {
      border: 1px solid #c60c20;
      background-color: #c60c20;
      background-clip: content-box;
      width: 5px;
    } 
    input[type="checkbox"]+label::before {
      content: "\a0";
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      width: 8px;
      height: 5px;
      border-radius: 50%;
      margin: -28px 4px 0 4px;
    }
    div{
      margin-left: 3px;
    }
  }