修改checkbox的样式

一、原生checkbox样式

修改checkbox的样式_第1张图片

二、修改样式代码

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

  
createTrialChange(e.target.checked)} className={classes.checkboxItem} ref={trailRef} /> {trial}
createTpmChange(e.target.checked)} className={classes.checkboxItem} ref={tpmRef} /> {createTPM}

三、修改后的效果图

修改checkbox的样式_第2张图片

四、方法指南

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

你可能感兴趣的:(React,css,css,html,css3)