CSS单选框怎么变成方框 |mini-css-extract-plugin hot

然而，有时候大家可能需要将默认的圆形单选框变成方框，以适应特定的设计风格。

下面介绍一种用CSS将单选框变成方框的方法：

input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 0;
margin: 0;
cursor: pointer;
}
input[type=radio]:checked {
background-color: #ccc;
}

以上样式使用了appearance: none;将默认的样式去掉，并设置了display: inline-block;、width: 20px;、height: 20px;、border: 1px solid #ccc;和border-radius: 0;来定义方框的样式。

另外，为了使选中的单选框有明显的变化，大家使用:checked伪类来设置背景颜色。

使用上述方法，大家便可以轻松将CSS单选框变成方框，以适应不同的设计需求。