單選框

HTML代碼

樣式

.radio input{
visibility: hidden;
}
.radio label{
position: relative;
}
.radio label:after{
content: "";/*必須設置*/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #5dbd5d;
position: absolute;
top: 0px;
left: -32px;
border-radius: 20px;
}

.radio input:checked+label:after{
background-color: #5dbd5d;
}

效果：

或者使用背景圖片

css - 表單元素默認樣式美化 - 單選框