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

【问题标题】：CSS Custom Radiobutton without text没有文字的 CSS 自定义单选按钮
【发布时间】：2016-11-04 20:13:59
【问题描述】：

我正在寻找使用纯 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;
 }

只要我的收音机有标签，它就可以完美地工作。只要我删除标签或删除标签文本，什么都不会显示。实现我的目标的最佳方法是什么。我是否应该从 & + 标签中删除背景样式并将其添加为输入本身的背景并调整位置以使收音机与默认收音机样式重叠？

你的帮助，安迪

编辑：

我至少添加了

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

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

【问题讨论】：

标签： css radio-button less

【解决方案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 版本中对此进行了测试；我不知道它的兼容性如何。

【讨论】：

嘿伙计，寻求您的帮助。我一定会看看它，只是用自己接受的答案来标记。

【解决方案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;
}

演示：http://jsfiddle.net/nuzhysgg/

【讨论】：

您的帖子，但我正在搜索没有其他 html 元素的解决方案。使用您的代码，它或多或少与使用标签标签相同。而不是标签，我只需要在每次输入后添加一个 div :)

【解决方案3】：

似乎没有完美的解决方案。您实际上需要一个元素，如标签或 div/etc 标签来更改收音机样式。一种可能性是在输入字段周围使用标签构建您的收音机：

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

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

【讨论】：