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

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，但它没有帮助。有人可以帮我解决这个问题吗？

它们现在看起来像这样：

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

Answer 2

您必须隐藏单选按钮并添加更多元素，例如 <span> 和 <label>

它的工作原理如下：http://jsfiddle.net/etz9Lfat/

Answer 3

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

这样做的真正好处是它也适用于 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>

Answer 4

我会建议一个完全不同的解决方案。

input[type="checkbox"], input[type="radio"] {
    display:none;
}
input[type="checkbox"] + label{
    padding-left:35px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:52px; /* width of the checkbox */
    height:53px; /* height of the checkbox */
    margin:-1px 10px 0 -35px;
    vertical-align:middle;
    background:url('http://i.stack.imgur.com/M3EkO.png')  left top no-repeat;
    cursor:pointer;
}

/* replaces the image if checked.*/
input[type="checkbox"]:checked + label span {
    background:url('http://i.stack.imgur.com/Ialva.png') left top no-repeat;
}

<input id="cb" value="" type="checkbox">
<label for="cb"><span></span> Text</label>

使用此解决方案，您不会在所有浏览器中遇到任何问题。 它会隐藏复选框本身，但它仍然有效，因为您可以单击连接到复选框的标签。 在此标签中，您的背景图像及其大小有一个跨度。所以它看起来仍然像一个复选框，而您隐藏的复选框将被“选中”或“未选中”

Answer 5

将此添加到您的 css 文件中：

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