css单选框改成正方形 |css last child

/* 单选框样式 */
input[type="radio"] {
display: none; /* 隐藏原始单选框 */
}
/* 自定义单选框样式 */
label {
display: inline-block;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
cursor: pointer;
position: relative;
}
/* 选中状态样式 */
label:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #666;
visibility: hidden;
}
/* 通过选中状态改变样式 */
input[type="radio"]:checked + label:after {
visibility: visible;
}

以上是将单选框改变为正方形的基础代码，可以根据自己的需求进行相应的修改。