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

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

Ty的帮助，安迪

编辑：

我至少添加了

&: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版本中对此进行了测试;我不知道它有多兼容。

Answer 2

试试这个：

<强> HTML

<label>
   <input type="radio" value="1">
   <div></div>
</label>

<强> CSS

input[type="radio"] {
   display: none;
}

input[type="radio"] + div {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;
}

input[type="radio"] + div:hover {
    border-color: #c2c2c2;
}

input[type="radio"]:checked + div {
    background:gray;
}

DEMO：http://jsfiddle.net/nuzhysgg/

Answer 3

似乎没有完美的解决方案。实际上你需要有一个像label或div / etc标签这样的元素来改变收音机的风格。一种可能性是在输入字段周围建立带有标签的无线电：

<label>
 <input type="radio"....../>
</label>

然后你可以尝试通过css添加样式。在我看来，这不是最好的解决方案，但它使造型更容易。

CSS自定义单选按钮没有文本

3 个答案: