input[type=radio] { /*去除浏览器默认样式*/ -webkit-appearance:none; -moz-appearance:none; appearance:none; /*自定义样式*/ position:relative; display:inline-block; width:20px; height:20px; border:1px solid #333; outline:none; cursor:pointer; /*设置为圆形,看起来是个单选框*/ -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; vertical-align:middle; } input[type=radio]:after { content:''; position:absolute; width:12px; height:12px; display:block; left:0; top:0; right:0; bottom:0; margin:auto; background:#17533b; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; -webkit-transform:scale(0); -moz-transform:scale(0); transform:scale(0); /*增加一些动画*/ -webkit-transition:all ease-in-out 300ms; -moz-transition:all ease-in-out 300ms; transition:all ease-in-out 300ms; } input[type=radio]:checked:after { -webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1); }
自定义radio平时我们还是比较用的比较频繁的,喜欢的收藏下吧,原创不容易~~~