在以前遇到使用 < input >的 radio 或是 checkbox 都是使用遊覽器原生的樣式，

這次剛好遇到設計搞是有做過更動的樣式，在沒經驗的情況下找到了方法，

當然也要記錄一下了🗒️。

圖一:

圖一是這次拿到需要完成的樣式，

首先是先將 HTML 準備好，

<div class="customOptions">
  測試樣式
  <label class="testOptoins" for="radio1">
    <input type="radio" name="test" id="radio1"/>
    選項1
    <span></span>
  </label>
  <label class="testOptoins" for="radio2">
    <input type="radio" name="test" id="radio2"/>
    選項2
    <span></span>
  </label>
</div>

再來就要來寫 CSS 了，因為我們不需要原本遊覽器的 input 樣式，

所以我會先將原本的隱藏起來，再利用 <span> 設計樣式來取代原本的，

.testOptoins + .testOptoins {
  margin-left: 4%;
}
.testOptoins input[type="radio"] {
  display: none;
}
.testOptoins span {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: #979797 1px solid;
  display: block;
  position: absolute;
  left: 0px;
  top: 14px;
}
.testOptoins span::after {
  content: "";
  height: 10px;
  width: 10px;
  background: var(--gradient);
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
}

先在 <span> 上設計出 radio 的外框，再來就要利用偽元素畫出裡面的圓圈，

*提醒: after 或 before 偽元素裡面一定要有 content 這個屬性，不然他不會顯示。

都畫好後應該就能夠看到像圖二這樣的外觀。

圖二:

最後就要運用到 CSS3 一個新的偽元素 :checked 來完成這個自訂義的樣式。

.testOptoins + .testOptoins {
  margin-left: 4%;
}
.testOptoins input[type="radio"] {
  display: none;
}
.testOptoins span {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: #979797 1px solid;
  display: block;
  position: absolute;
  left: 0px;
  top: 14px;
}
.testOptoins span::after {
  content: "";
  height: 10px;
  width: 10px;
  background: var(--gradient);
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
	transition: 200ms ease-in-out 0s;
}
.testOptoins input[type="radio"]:checked ~ span:after {
  transform: translate(-50%, -50%) scale(1);
}

先讓 :after樣式在 radio 尚未選取前 scale 變成 0