html radiobuttons风格

Posted 2021-05-11

@attention:#f4f4f4; /*almost white*/
@accent:#3197EE;

.radio {
  margin: 0.5rem;
  input[type="radio"] {
    opacity: 0;
    position: absolute;
    + .radio-label {
      &:before {
        content: '';
        background: @attention;
        border-radius: 100%;
        border: 1px solid darken(@attention, 25%);
        display: inline-block;
        width: 1.4em;
        height: 1.4em;
        margin-right: 1em; 
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
      }
    }
    &:checked {
      + .radio-label {
        &:before {
          background-color: @accent;
          box-shadow: inset 0 0 0 4px @attention;
        }
      }
    }
    &:focus {
      + .radio-label {
        &:before {
          outline: none;
          border-color: @accent;
        }
      }
    }
    &:disabled {
      + .radio-label {
        &:before {
          box-shadow: inset 0 0 0 4px @attention;
          border-color: darken(@attention, 25%);
          background: darken(@attention, 25%);
        }
      }
    }
    + .radio-label {
      &:empty {
        &:before {
          margin-right: 0;
        }
      }
    }
  }
}

  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Checked</label>
  </div>