【CSS】radio style

説明

自由撰寫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

Display

Leave a Reply

Your email address will not be published. Required fields are marked *