css 自定义无线电输入|标签的CSS

Posted 2021-05-13

  <label class="radio-button">
        <input type="radio" name="radio" />
        <span class="custom-radio"></span>
        Radio 1
    </label>

    <label class="radio-button">
        <input type="radio" name="radio" />
        <span class="custom-radio"></span>
        Radio 2
    </label>

.radio-button {
  cursor: pointer;
  font-weight: normal;
  display:block;

  input[type="radio"] {
    display: none;

    &:checked + .custom-radio::before{
      transform: scale(1);
    }
  }

  .custom-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #000;
    margin-right: 5px;
    display: inline-block;
    position: relative;
    vertical-align: -4px;
    box-sizing:content-box;
    &::before {
      content: "";
      width: 6px;
      height: 6px;
      background: #5591dc;
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      margin-left: -3px;
      margin-top: -3px;
      transform: scale(0);
      transition: all 0.3s ease;
    }
  }
}