html单选按钮样式 正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)

html:

选项一

选项二

css:

div {

position: relative;

line-height: 30px;

}

input[type="radio"] {

width: 20px;

height: 20px;

opacity: 0;

}

label {

position: absolute;

left: 5px;

top: 3px;

width: 20px;

height: 20px;

border-radius: 50%;

border: 1px solid #999;　　　　　　　cursor: pointer;

}

/*设置选中的input的样式*/

/* + 是兄弟选择器,获取选中后的label元素*/

input:checked+label {

background-color: #fe6d32;

border: 1px solid #fe6d32;

}

input:checked+label::after {

position: absolute;

content: "";

width: 5px;

height: 10px;

top: 3px;

left: 6px;

border: 2px solid #fff;

border-top: none;

border-left: none;

transfo