从无线电输入中删除边框圆圈

Question

我想使用图像而不是常规无线电输入。

我是这样做的：

 input[type="radio"]{
    content:url('/images/new-home-page/Checkbox.png');
    height:3vh;
    width:3vh;
}
input[type="radio"]:checked{
    content:url('/images/new-home-page/checkedCheckbox.png');
}

不幸的是，他们周围有圈子。我尝试使用 border:none 或 text-decoration:none 但它没有帮助。有人可以帮我吗？

他们现在看起来像这样：

原文由 divHelper11 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会要求你使用 CSS 的 appearance 属性，它负责这样的组件。因此，设置 appearance: none 将使一种 display: none 成为组件的外观，这正是您所需要的。您可以使用这段 CSS 来使组件不显示，同时将元素保留在视图中：

 -webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;

片段

 input {
  content: url('http://i.stack.imgur.com/M3EkO.png');
  height: 16px;
  width: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:checked {
  content: url('http://i.stack.imgur.com/Ialva.png');
}

 Checkbox:
<input type="checkbox" name="" id="" /> <br />
Radios:
<input type="radio" name="Hi" id="" />
<input type="radio" name="Hi" id="" />

输出：http: //output.jsbin.com/digebimolu/1

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是另一个有趣的解决方案，使用伪元素，您还可以摆脱周围的焦点轮廓。

这样做的真正好处是它也适用于 IE 8-11，不幸的是，使用 appearence 的更好解决方案却不行。

 input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    position: relative;
    padding-left: 54px;
    cursor:pointer;
    font-size: 26px;
}
input[type="radio"] + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -22px;
    width:46px;
    height:46px;
    background: url('http://i.stack.imgur.com/M3EkO.png');
    background-size: contain;
}
input[type="radio"]:checked + label:before {
    background: url('http://i.stack.imgur.com/Ialva.png');
}

 <input id="cb" value="1" name="cb" type="radio">
<label for="cb">Text 1</label>
<input id="cb2" value="2" name="cb" type="radio">
<label for="cb2">Text 2</label>

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议