自定义checkbox样式

方案1： 

// 修改checkbox样式
input[type="checkbox"]{
      position: relative;
      -webkit-appearance: none;
      vertical-align: middle;
      margin-top: 0;
      background: @color-white;
      border: @color-bf solid 1px;
      border-radius: 2px;
      min-height: 17px;
      min-width: 17px;
  }
// 修改选中后样式
  input[type="checkbox"]:checked {
      background: @color-theme;
      border: none;
  }
// 添加为元素 对号
  input[type='checkbox']:checked::after{
      content: '';
      top: 4px;
      left: 3px;
      position: absolute;
      background: transparent;
      border: @color-white solid 1px;
      border-top: none;
      border-right: none;
      height: 4px;
      width: 11px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
   }

方案2：

.demo1-item-selected {
        border: 1px solid @color-theme;
        .bg-span {
          position: absolute;
          width: 0;
          height: 0;
          border: 10px solid @color-theme;
          border-top: 10px solid transparent;
          border-left: 10px solid transparent;
          right: 0;
          bottom: 0;
        }
      }
.demo1-item-selected::after {
        content: '';
        bottom: 4px;
        right: 0;
        position: absolute;
        background: transparent;
        border: @color-white solid 1px;
        border-top: none;
        border-right: none;
        height: 4px;
        width: 11px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
}