[分享]css单选按钮只选一个

CSS单选按钮只选一个，可以通过以下步骤实现：

/*样式重置*/
input[type="radio"] {
  -webkit-appearance: none; /* 统一各浏览器样式 */
  -moz-appearance: none;
  appearance: none;
  outline: none; /* 防止选中时外边框 */
}

/*自定义样式*/
input[type="radio"]::before {
  content: ""; /* 清除文字 */
  display: inline-block; /* 使伪元素成为行内元素 */
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background-color: #fff;
}

/*选中时样式*/
input[type="radio"]:checked::before {
  background-color: #f00;
}

/*去掉label的默认样式*/
label {
  display: inline-block;
  margin-right: 16px;
}

/*将选项布局为一排*/
label {
  display: inline-block;
  margin-right: 16px;
} 

代码解释：

首先需要将单选框的默认样式清除，这样才能进行自定义样式的添加。然后通过输入伪元素::before来添加一个圆形，选中时改变背景色。最后为了让选项在一排布局，需要去掉label的默认样式，并设置为行内块元素。