説明

自由撰寫radio input的樣式，但是保有 checked 的功能

【架構】

• <label>裡面要有 2 個東西：<input type=”radio”>、<div class=”radio-widget”>
  ※這樣點到label裡面任何一處，<input type=”radio”>都會被觸發
• radio-widget是假的radio，在〔.radio-widget〕做出勾選前的樣式
• 在〔input[type=”radio”]:checked+.radio-widget〕撰寫勾選後的樣式

參考：input label 應用、漸層色塊
衍生：checkbox style

範例

label.radio-label
 input(type="radio" name="rd" id="rd1" value="1" checked)
 .radio-widget
 | option 1

label.radio-label
 input(type="radio" name="rd" id="rd2" value="2" checked)
 .radio-widget
 | option 2

label.radio-label
 input(type="radio" name="rd" id="rd3" value="3" checked)
 .radio-widget
 | option 3

.radio-label
 margin: 0px 5px

 //原本的radio設不顯示
 input[type="radio"]
  display: none
 
 //這邊寫選取後的效果
 input[type="radio"]:checked+.radio-widget
  border-color: #50BBB6
  background: radial-gradient(#50BBB6 44%, transparent 50%)
  
.radio-widget
 width: 20px
 height: 20px
 border: 1px solid #eee
 border-radius: 100%
 position: relative
 margin-right: 5px
 background: radial-gradient(#eee 20%, #fff 25%)
 

.radio-widget, input
 display: inline-block
 vertical-align: top