修改checkbox的样式

一、原生checkbox样式

二、修改样式代码

css

 .checkboxItemBox{
      display: flex;
      input[type="checkbox"]::after {
          width: 20px;
          height: 20px;
          content: " ";
          color: #fff;
          display: inline-block;
          visibility: visible;
          border-radius: 2px;
          padding: 1px 2px;
          box-sizing: border-box;
          background-color: #fff;
          border: 1px solid $theme-border-color;
          
      }
      input[type="checkbox"]:checked::after{
          content:"√";
          cursor: pointer;
          color: #fff;
          font-size: 20px;
          font-weight: 700;
          background-color: $theme-border-color;
      }
    }

html

  <div className="checkboxItemBox">
    <input
       type="checkbox"
       value={isTrial}
       onChange={(e) => createTrialChange(e.target.checked)}
       className={classes.checkboxItem}
       ref={trailRef}
     />
     {trial}
   </div>
   <div className="checkboxItemBox">
     <input
       type="checkbox"
       value={isCreateTpm}
       onChange={(e) => createTpmChange(e.target.checked)}
       className={classes.checkboxItem}
       ref={tpmRef}
     />
     {createTPM}
   </div>

三、修改后的效果图

四、方法指南

采用重写checkbox 覆盖原生的方法修改的样式来达到checkbox 自定义的样式，以上案例仅供参考