[分享]css单选按钮变成正方形

如何用CSS将单选按钮变成正方形呢？以下是一种简单的方法：

 input[type="radio"] {
    width: 20px;
    height: 20px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
  }
  
  input[type="radio"]:checked {
    background-color: #999;
  } 

上述代码中，首先使用width和height属性将单选按钮变成正方形。然后，border-radius属性被设置为0，以去除圆角。接着，-webkit-appearance、-moz-appearance和appearance属性被设置为none，以去除默认的样式。最后，border属性被设置为1px的实线边框。

如果要当单选按钮被选中时变成其他颜色，则可以使用:checked伪类。在上述代码中，当单选按钮被选中时，背景颜色被设置为#999。

这是一个简单的方法，希望这篇文章对您有所帮助！