自定義radio單選框
阿新 • • 發佈:2018-11-16
<input type="radio" name="isSponsor" class="activity-radio">
<input type="radio" name="isSponsor" class="activity-radio">
.activity-radio { width: 20px; height: 0px; background-color: #777; margin-right: 30px; border-radius: 50%; position: relative; } .activity-radio:before,.activity-radio:after { content: ''; display: block; position: absolute; border-radius: 50%; transition: .3s ease; } .activity-radio:before { top: 0px; left: 0px; width: 18px; height: 18px; background-color: #fff; border: 1px solid #777; } .activity-radio:after { top: 6px; left: 6px; width: 8px; height: 8px; background-color: #fff; } .activity-radio:checked:after { top: 3px; left: 3px; width: 12px; height: 12px; background-color:#FFBA3C; } .activity-radio:checked:before { border-color:#FFBA3C; }
如圖:
原文 https://blog.csdn.net/promisecao/article/details/54029848