如何为单选按钮（Radio Button）添加占位符？

嘿，我懂你想要的效果——给每个单选按钮加上对应的数字标识（第一个显示1，第二个显示2）对吧？其实原生单选按钮本身并没有placeholder属性，但咱们用CSS就能轻松搞定，给你两种实用方案：

方案一：用CSS计数器自动生成数字（推荐） #

这个方案的好处是不用手动给每个选项写数字，新增选项时数字会自动递增，非常省心。

HTML 结构 #

<div class="radio-group">
  <input type="radio" name="options" id="opt1">
  <label for="opt1">选项内容</label>
  
  <input type="radio" name="options" id="opt2">
  <label for="opt2">选项内容</label>
  
  <input type="radio" name="options" id="opt3">
  <label for="opt3">选项内容</label>
</div>

CSS 样式 #

/* 初始化计数器，给容器起个计数器名称 */
.radio-group {
  counter-reset: radio-num;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 调整选项之间的间距 */
}

/* 给每个label绑定计数器，每遇到一个label就递增数字 */
.radio-group label {
  counter-increment: radio-num;
  position: relative;
  padding-left: 30px; /* 给数字和按钮留出空间 */
  cursor: pointer;
  line-height: 20px;
}

/* 生成数字并设置样式 */
.radio-group label::before {
  content: counter(radio-num);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%; /* 做成圆形，和单选按钮风格一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #555;
  background-color: #fff;
}

/* 隐藏原生单选按钮，避免和自定义数字冲突 */
.radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 选中状态的数字样式，突出显示 */
.radio-group input[type="radio"]:checked + label::before {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

方案二：手动添加数字（适合固定选项数量） #

如果你的选项数量固定且不多，直接在标签里写数字更简单，样式也更容易调整：

HTML 结构 #

<div class="radio-group">
  <input type="radio" name="options" id="opt1">
  <label for="opt1">1. 选项内容</label>
  
  <input type="radio" name="options" id="opt2">
  <label for="opt2">2. 选项内容</label>
  
  <input type="radio" name="options" id="opt3">
  <label for="opt3">3. 选项内容</label>
</div>

CSS 样式 #

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-group label {
  cursor: pointer;
  padding-left: 8px;
}

/* 可选：美化原生单选按钮 */
.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
}

为什么之前的代码没生效？ #

如果你之前尝试的代码没起作用，大概率是这几个原因：

• 没有正确关联<input>的id和<label>的for属性，导致样式无法正确绑定
• CSS选择器写错了，比如没有选中对应的标签或按钮元素
• 原生单选按钮的样式优先级更高，没有被正确隐藏或覆盖

你可以根据自己的需求选其中一个方案试试，要是还有问题可以随时说细节哦！

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