如何用CSS自定义单选按钮样式并使标签与其同行显示？

我看你在自定义单选按钮样式时遇到了两个头疼的问题：自定义的圆形按钮显示有问题，而且标签没法和按钮好好对齐。咱们来一步步把这些问题解决掉～

原代码的问题分析 #

你直接给<label>设置了宽高和背景，这会导致标签里的文字被挤压或者错位——毕竟标签本身是用来承载文字的，直接给它加宽高肯定会冲突。另外，没有设置垂直对齐属性，所以按钮和标签自然没法在同一行对齐。

修正后的实现方案 #

我们换个思路：用标签的伪元素来做圆形按钮，这样标签的文字就能正常排列，同时通过垂直对齐属性让两者完美对齐。下面是完整的代码：

/* 隐藏原生单选按钮 */
input[type="radio"] {
  display: none;
}

/* 标签基础样式：控制文字和按钮的对齐 */
input[type="radio"] + label {
  position: relative;
  padding-left: 30px; /* 给伪元素留出位置 */
  cursor: pointer;
  vertical-align: middle;
  margin-right: 20px; /* 选项之间的间距 */
}

/* 未选中状态的圆形按钮 */
input[type="radio"] + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 50%;
  background-color: #fff;
}

/* 选中状态的样式：填充背景色 */
input[type="radio"]:checked + label::before {
  background-color: #000;
}

/* 可选：给选中状态加个小白点，更贴近原生单选按钮效果 */
input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

<input type="radio" id="male" name="gender" value="M">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="F">
<label for="female">Female</label>

代码说明 #

1. 用label::before创建圆形按钮，通过position: absolute定位在标签左侧，不会影响文字的排列。
2. transform: translateY(-50%)确保按钮在标签内垂直居中，配合vertical-align: middle让整个选项和其他元素也能对齐。
3. 选中状态通过::before修改背景色，还可以用::after添加小白点，让样式更贴近原生单选按钮的交互感。

这样修改后，自定义单选按钮的样式就能正常显示，标签也会和按钮完美对齐啦～

内容的提问来源于stack exchange，提问作者phasco phaisco