scss 创建自定义键盘访问单选按钮

Posted 2021-05-17

Create custom keyboard accessible radio buttons: https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accessible-radio-buttons

<fieldset>
  <legend>What is your favorite Wild Animal?</legend>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="elephant" />
    <label for="elephant">Elephant</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="monkey" />
    <label for="monkey">Monkey</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="cheetah" />
    <label for="cheetah">Cheetah</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="giraffe" />
    <label for="giraffe">Giraffe</label>
  </div>
</fieldset>

$muted-red: #db3846;

fieldset {
  border: none;
}

.radio-wrapper {
  margin: 0.5rem 0;
}

input[type="radio"] {
  opacity: 0;
  
  + label {
    position: relative;
    cursor: pointer;
    
    &::before {
      content: '';
      position: absolute;
      left: -24px;
      border-radius: 50%;
      border: 1px solid #6F686A;
      width: 18px;
      height: 18px;
    }
    
    &::after {
      content: '';
      position: absolute;
      left: -20px;
      top: 4px;
      border-radius: 50%;
      width: 12px;
      height: 12px;
    }
  }
  
  &:checked {
    + label::after {
      background: $muted-red;
    }
  }
  
  &:focus {
    + label::before {
      box-shadow: 0 0px 8px $muted-red;
    }
  }
}