没有文字的CSS自定义单选按钮

Question

我正在寻找使用纯 CSS 但没有标签或标签文本来设置自定义单选按钮样式的最佳方法。

目前我做了类似的事情:(没有检查、禁用等不同状态)

input[type=radio] {
 width   : 28px;
 margin  : 0;
 padding : 0;
 opacity : 0;

 & + label {
  background: url("radio_unselected.png") no-repeat 0 2px;
  padding-left : 28px;
  line-height  : 24px;
  cursor: pointer;
 }

只要我的 radio 贴上标签，它就完美无缺。一旦我删除标签或删除标签文本，就不会显示任何内容。实现我的目标的最佳方法是什么。我应该从 & + 标签中删除背景样式并将其添加为输入本身的背景并调整位置以使 radio 与默认 radio 样式重叠吗？

谢谢你的帮助， 安迪

编辑:

我至少加了

&:before {
  content:"";
  display: inline-block;
}

现在我实际上可以添加没有文本的标签，但仍然不是完美的解决方案，因为需要标签标签。

Answer 1

我遇到了同样的困境。我想使用单选按钮作为图像轮播的分页控件。我想到了这个:

input[type=radio] {
  visibility: hidden;
  position: relative;

  margin-left: 5px;
  width: 20px;
  height: 20px;
}

input[type=radio]:before {
  content: "";
  visibility: visible;
  position: absolute;

  border: 2px solid #eb6864;
  border-radius: 50%;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

这无需任何额外标记即可工作。这是我用于轮播的示例:

<input type='radio' name='test'>
<input type='radio' name='test' checked>
<input type='radio' name='test'>
<input type='radio' name='test'>
<input type='radio' name='test'>

参见 this fiddle .我只在最近构建的 Chrome 中测试过这个；我不知道它的兼容性如何。