scss 复选框示例

Posted 2021-05-17

input[type=checkbox]{
  position: relative;
  margin: 0 15px 0 0;
  vertical-align: middle;
  appearance: none;
  &:after{
    content: '';
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: $lt-yellow;
  }
}

input[type=checkbox]:checked{
  outline: none;
  &:after{
    content: '';
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    // background: $lt-yellow url(assets/img/checkbox.svg) center center no-repeat; // styleguide path
    background: $lt-yellow url(../img/checkbox.svg) center center no-repeat;
    background-size: 50%;
  }
}