純 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: white; // 這裡取個巧，與下麵顏色一樣而已
  }

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

    &: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