Radio button 美化

HTML

<div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label  for="radio-2" class="radio-label">Unchecked</label>
  </div>

成果

CSS


.radio { margin: 0.5rem; input[type="radio"] { opacity: 0; position: absolute; + .radio-label { &:before { content: ''; background: $color1; border-radius: 100%; border: 1px solid darken($color1, 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: $color2; box-shadow: inset 0 0 0 4px $color1; } } } &:focus { + .radio-label { &:before { outline: none; border-color: $color2; } } } &:disabled { + .radio-label { &:before { box-shadow: inset 0 0 0 4px $color1; border-color: darken($color1, 25%); background: darken($color1, 25%); } } } + .radio-label { &:empty { &:before { margin-right: 0; } } } } }