CSS自定义CheckBox

原创于 2024-11-04 21:43:56 发布

· 236 阅读

0 ·

版权

文章标签：

#CSS #前端

CSS自定义CheckBox

<label>
  <input type="checkbox" />
  记住密码
  <div class="show-box" />
</label>
label {
  position: relative;
  cursor: pointer;

  input {
    cursor: pointer;
  }

  input:checked + .show-box {
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    background: white;
  }

  .show-box {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: @eColor;

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 6px;
      width: 3px;
      height: 8px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
  }
}