html中改变单选按钮的默认样式,改变单选按钮radio的默认样式

默认的radio的样式很丑，那么如何改变其默认的样式呢？

我最开始想的是能不能直接给radio设置背景色等，发现并无用！能够借助于标签来建立一个相似于radio的效果。

先来看下效果：css

html代码以下:

html

在校生

非在校生

样式以下:

.choice{

position: relative;

}

.choice .radio{

position: relative;

display: inline-block;

font-weight: 400;

color: #0c4757;

padding-left: 25px;

cursor: pointer;

}

.choice .radio input{

position: absolute;

left: -9999px;

}

.choice .radio i{

display: block;

position: absolute;

top: 6px;

left: 0;

width: 15px;

height: 15px;

outline: 0;

border: 1px solid #47a8c0;

background: #9cd9e8;

border-radius: 50%;

transition: border-color .3s

-webkit-transition: border-color .3s;

}

.choice .radio input:checked+i{

border-color: #0c4757;

}

.choice .radio input+i:after{

position: absolute;

content: '';

top: 3px;

left: 3px;

width: 9px;

height: 9px;

border-radius: 50%;

background-color: #47a8c0;

opacity: 0;

transition: opacity .1s;

-webkit-transition: opacity .1s;

}

.choice .radio input:checked+i:after{

opacity: 1;

}demo地址：http://zhsisusie.github.io/IFE/Task31_5_8/index.html