css 单选框变成方形

CSS中的单选框通常是圆形的。但是有时候我们可能希望它为方形，下面的代码可以实现这个效果：

input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #000;
        outline: none;
        width: 20px;
        height: 20px;
        border-radius: 0;
        position: relative;
        top: 6px;
}
input[type=radio]:checked::before {
        content: "\2713";
        font-size: 18px;
        position: absolute;
        top: -1px;
        left: 1px;
        color: #000;
}
    

上面的代码首先是取消了单选框的默认圆形样式，然后给他设置了边框、大小、位置等属性。同时，还添加了一个伪元素before来实现选中状态时的方形表示。这个伪元素显示了一个字符（unicode编码为"13"），表示选中状态下的勾号，再通过样式设置位置和颜色等属性即可。

通过以上CSS代码的设置，我们可以将单选框转化为方形，让页面呈现出更加美观和个性化的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！