CSS Custom Radiobutton没有文字

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;
 }

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

Ty为你提供帮助,Andy

编辑:

我至少补充说

&: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'>

看到这个小提琴.我只是在最近的Chrome版本中对此进行了测试; 我不知道它有多兼容.