美化UI小技巧，讓單選框可以更符合設計樣式～

HTML

  <input type="radio" name="radio" id="radio">
  <label for="radio">options</label>

CSS

.radio{
  position: relative;
  margin-bottom: 10px;
}
label{
  position: absolute;
  top: 0;
  left: 0;
  color: #1c1c1c;
  font-size: 14px;
  display: flex;
  align-items: center;
}

讓原本單選框變透明。

input[type="radio"]{
  opacity: 0;
}

用偽元素來製作選框外框。

label:before{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 1px #bdbdbd;
  box-sizing: border-box;
  margin-right: 10px;
}

當選項被選取時，填滿選匡顏色。

input:checked + label:before{
  background: #A41515;
  box-shadow: inset 0 0 0 2px #fff;
}