纯 CSS 解决自定义 CheckBox 背景颜色问题

CodePen

需要使用色 #ec6337(当然可以是任意颜色)，解决问题：记住密码定制 CheckBox，解释全在注释里

主要使用到 ::before 或 ::after 伪类处理，伪装成内部的那个勾

• html

<label>
  <input type="checkbox" /> // 注意嵌在 label 里面
  记住密码
  <div class="show-box" /> // 注意嵌在 label 里面
</label>

• CSS(LESS)

label {
  position: relative;
  cursor: pointer;

  input {
    cursor: pointer;
  }

  input:checked + .show-box {
    background: #ec6337;
  }

  .show-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    background: white; // 这里取个巧，与下面颜色一样而已

    &:before { // 使用了 absolute 所以无所谓是 before 还是 after
      content: ''; // 空白内容占位，当做盒模型处理，见下面
      position: absolute;
      top: 2px;
      left: 6px;
      width: 3px; // 勾的短边
      height: 8px; // 勾的长边
      border: solid white; // 勾的颜色
      border-width: 0 2px 2px 0; // 勾的宽度
      transform: rotate(45deg); // 定制宽高加上旋转可以伪装内部的白色勾
    }
  }

CodePen

• 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签

3955 0元 限免

云知梦-HTML5网页标签

4616 0元 限免

Web前端页面制作快速入门

5491 9.8元