checkbox與lable標籤，css設置點擊勾選效果

lable標籤的for屬性與相關元素的id綁定，當點擊label元素內點擊文本，就會觸發此控。若是for和id屬性值要使用變量，能夠用:for和:id代替，例如：:for="'checkboxCar'+index"

html

<div class="agreeMent">
  <input type="checkbox" id="trustClaim"/>
  <div class="icon"></div>
  <label class="checkLable" for="trustClaim">我贊成</label>
  <div class="text">《使用協議》</div>
</div>

css

.agreeMent{
  margin: 0.17rem 0 0 0.15rem;
  height: 0.32rem;
  font-size: 0.12rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  input{
    position: absolute;
    top: 0;
    left: -9999px;
  }
  .icon{
    pointer-events: none; // 防點擊
    width: 0.16rem;
    height: 0.16rem;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -0.08rem;
    background-image: url(../../img/repairAmount05.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  input[type='checkbox']:checked + .icon{
    background-image: url(../../img/repairAmount06.png);
  }
  .checkLable{
    display: inline-flex;
    align-item: center;
    height: 0.32rem;
    padding-left: 0.24rem;
    color: #A5A5A5;
    line-height: normal;
  }
  .text{
    line-height: normal;
    color: #FF8727;
  }
}

或者不用背景icon

.icon{
  width: 0.16rem;
  height: 0.16rem;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.08rem;
  border: 1px solid #d0d0d0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0.02rem;
}
input[type='checkbox']:checked + .icon{
  border: 1px solid #FF8727;
  background-color: #FF8727;
}
input[type='checkbox']:checked + .icon:after{
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin-top: -0.04rem;
  margin-left: -0.05rem;
  transform: rotate(-48deg);
  width: 0.09rem;
  height: 0.04rem;
  border: 1px solid #fff;
  border-top: 0;
  border-right: 0;
}