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

Question

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

我是这样做的：

border:none

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

他们现在看起来像这样：

Answer 1

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

display: none

<强>段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

输出：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

我建议另外一个解决方案。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 5

在您的css文件中添加：

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