background-clip与复选框背景色范围限制实例页面

展示

代码

• HTML：

  默认：<label class="checkbox"></label> 
  选中：<label class="checkbox checked"></label>

• CSS：

  .checkbox {
      display: inline-block;
      width: 18px; height: 18px;
      border: 3px solid transparent;
      box-shadow: inset 0 1px, inset -1px 0, inset 0 -1px, inset 1px 0;
      color: gray;
      user-select: none;
      vertical-align: middle;
  }
  .checkbox.checked {
      color: deepskyblue;
      background: currentColor;
      background-clip: padding-box;
  }
  .checkbox.checked::before {
      content: "";
      display: block;
      width: 10px; height: 3px;
      margin: 5px auto 0;
      border: solid #fff;
      border-width: 0 0 2px 2px;
      transform: rotate(-45deg);
  }