radio美化

今天遇到一個難題,我須要修改單選按鈕選中的顏色,百度了一下,簡直可怕,原來超級複雜,幸得一大神相助,代碼以下:css

html:html

<input id="radio-1" name="radio" type="radio" checked><label for="radio-1"></label>
<input id="radio-2" name="radio" type="radio"><label for="radio-2"></label>orm

css:htm

/* 自定義單選框樣式*/
input[type='radio']{ display:none;}
input[type='radio']+label{display:inline-block;position:relative;overflow:hidden;width:18px;height:18px;vertical-align:middle;border:1px solid #888;
background-color:#fff;margin-right:10px;cursor:pointer;border-radius:50%;}
input[type='radio']+label:after{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;
background-color: #17CDA6;border-radius: 50%;transform:scale(0);}
input[type='radio']:checked+label{background-color:#fff;}
input[type='radio']:checked+label:after{background:-color:#17CDA6;transform:scale(1);}input

效果:it

相關文章
相關標籤/搜索