html单选框代码正方形

HTML单选框是网络应用中常用的一种交互元素，可以让用户选择一个选项。而为了美化HTML单选框，有时我们需要将它的外观改成正方形，下面是这种效果的示例代码：

<style>
    .square-radio {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid grey;
        border-radius: 2px;
        margin-right: 10px;
        vertical-align: middle;
    }
    .square-radio input[type=radio] {
        position: absolute;
        visibility: hidden;
        display: none;
    }
    .square-radio input[type=radio]:checked:after {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 12px;
        height: 12px;
        background-color: black;
        content: "";
    }
</style>

<label class="square-radio">
    <input type="radio" name="option"/>
</label>

这段代码使用了CSS的绝对定位和伪元素来实现正方形的效果。为了创建正方形的框，需要使用圆角属性 border-radius: 2px ，将四个角都设置成2像素的半径，这样就可以使边角变成直角。

然后我们再新建一个伪元素，并通过绝对定位将其置于圆角方框中。当单选框处于选中状态时，伪元素将填充黑色颜色，从而使正方形变成实心的效果。

最后，我们将单选框的样式应用于一个标签上，这样就可以将单选框的样式美化成为一个正方形。其中 vertical-align: middle 属性让正方形合适地垂直居中。