html单选按钮变成方形代码

HTML中的单选按钮默认是圆形的，但是有时候我们可能需要将其变成方形，下面就是一个简单的代码示例：

/* 设置单选按钮的样式 */
input[type=radio]{
   -webkit-appearance: none;/* 禁用默认样式 */
   -moz-appearance: none;
   appearance: none; 
   border: 1px solid #ccc;
   border-radius: 0;
   width: 16px;
   height: 16px;
   margin-right: 5px;
   background: #fff;
   vertical-align: middle;
}

/* 设置选中状态的样式 */
input[type=radio]:checked:before{
   content: "\f10c";/* 使用字体图标作为选中状态的样式 */
   font-family: "FontAwesome";
   display: inline-block;
   width: 16px;
   height: 16px;
   text-align: center;
   line-height: 16px;
   color: #fff;
   background: #a94442;
   border: 1px solid #a94442;
   border-radius: 0;
   margin-right: 5px;
   vertical-align: middle;
}

在这段代码中，我们首先禁用了单选按钮的默认样式，然后设置了自定义的样式，其中包括了边框、宽高、背景色等。同时，我们还使用了字体图标作为选中状态的样式，将其放在了一个:before伪类中，并设置了相应的样式，包括字体、文本位置、颜色、背景色等。

在使用这段代码时，只需要将其复制到CSS文件中，并将相应的单选按钮的class设置为我们自定义的样式名称即可。