:checked伪类模拟单复选框实例页面

展示

代码

• HTML：

  <p>
      <input type="radio" id="radio1" name="radio" checked>
      <label for="radio1" class="cs-radio"></label>
      <label for="radio1">单选项1</label>
      <input type="radio" id="radio2" name="radio">
      <label for="radio2" class="cs-radio"></label>
      <label for="radio2">单选项2</label>
      <input type="radio" id="radio3" disabled>
      <label for="radio3" class="cs-radio"></label>
      <label for="radio3">单选项disabled</label>
      <input type="radio" id="radio4" checked disabled>
      <label for="radio4" class="cs-radio"></label>
      <label for="radio4">单选项checked + disabled</label>
  </p>
  <p>
      <input type="checkbox" id="checkbox">
      <label for="checkbox" class="cs-checkbox"></label>
      <label for="checkbox">复选项</label>
      <input type="checkbox" id="checkbox2" disabled>
      <label for="checkbox2" class="cs-checkbox"></label>
      <label for="checkbox2">复选项disabled</label>
      <input type="checkbox" id="checkbox3" checked disabled>
      <label for="checkbox3" class="cs-checkbox"></label>
      <label for="checkbox3">复选项checked + disabled</label>
  </p>

• CSS：

  /* 单复选框 */
  [type="radio"],
  [type="checkbox"] {
      position: absolute;
      width: 20px; height: 20px;
      opacity: 0;
      cursor: pointer;
  }
  /* 单选框 */
  .cs-radio {
    display: inline-block;
    width: 20px; height: 20px;
    border: 1px solid gray;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    vertical-align: -.5ex;
    user-select: none;
    transition: border-color .2s;
    overflow: hidden; 
  }
  :focus + .cs-radio,
  :checked + .cs-radio {
    border-color: deepskyblue; 
  }
  :checked + .cs-radio::before {
    content: "";
    display: block;
    width: 10px; height: 10px;
    margin: 4px auto 0;
    border-radius: 50%;
    background-color: deepskyblue;
  }
  :disabled + .cs-radio {
    background-color: #f5f5f5;
    opacity: .4; 
  }
  
  /*复选框*/
  .cs-checkbox {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid transparent;
    border-radius: 4px;
    color: gray;
    box-shadow: inset 0 0 0 1px;
    background-color: #fff;
    box-sizing: border-box;
    vertical-align: -.5ex;
    user-select: none;
    transition: color .2s;
    overflow: hidden; 
  }
  :focus + .cs-checkbox,
  :checked + .cs-checkbox {
    color: deepskyblue; 
  }
  :checked + .cs-checkbox::before {
    content: "";
    display: block;
    width: 8px; height: 3px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    margin: 4px auto 0;
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  :disabled + .cs-checkbox {
    background-color: #f5f5f5;
    opacity: .4; 
  }