html - 我可以使用 CSS 为输入 radio 制作文本吗？

Question

我必须有单选按钮，我想为每个单选按钮制作一个文本值，有些人认为是和否。

<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/> 
<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>

我想知道我是否可以使用 CSS 为这些 radio 制作文本？

喜欢:

.tab1{
   content:'Yes';
}
.tab2{
   content:'No';
}

Answer 1

根据 W3C 规范，输入不应该有伪元素，尽管一些浏览器已经决定实现它们。

理想情况下，您应该在 label 中使用actual 文本，但如果您选择不这样做，您仍然可以使用 label 并将伪元素放在上面。

.tab1 + label:before {
  content: 'Yes';
  display: inline-block;
}
.tab2 +label:before {
  content: 'No';
  display: inline-block;
}

<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1"></label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2"></label>