css单选框 方框

CSS单选框是网页中常见的一种控件，可以用于用户选择一项选项。在CSS中，单选框方框的样式可以通过以下属性进行设置。

input[type=radio] {
  	appearance: none;
  	border: 2px solid #555;
  	border-radius: 50%;
  	width: 20px;
  	height: 20px;
  	outline: none;
  	cursor: pointer;
}

input[type=radio]:checked {
  	background-color: #555;
}

在上述代码中，首先我们使用了 appearance: none; 属性来移除浏览器默认的样式。接下来，我们设置了单选框方框的边框样式、宽度和高度，并添加了圆角。设置 outline: none; 属性来移除聚焦效果，让单选框外观更加美观。

当单选框被选中时，我们使用 :checked 伪类来改变背景色。可以根据不同需求，在 :checked 样式下设置不同的背景色。

通过上述方式，我们可以轻松地为网页添加美观的单选框方框，提升用户体验。