html中radio的颜色,radio样式修改颜色纯css

之前默认的

image.png

html为：

严紧

一般

宽松

改成

image.png

html为：

即增加 p 标签 和 span 标签

image.png

css为：

//----自定义radio样式

.degreeBox {

label{

position: relative;

p{

position: absolute;

width: 13px;

height: 13px;

border: 1px #5cb85c solid;

border-radius: 50%;

display: block;

top: 4px;

left: 0;

}

}

}

/*改变选中时的圆点*/

.degreeBox input:checked+p{

background-color: #fff;

span{

position: absolute;

width: 9px;

height: 9px;

border-radius: 50%;

background-color: #5cb85c;

left: 1px;

top: 1px;

}

}