html – 从无线电输入中删除边界

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

我这样做：

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,但不能帮助.有人可以帮我吗

他们现在看起来像这样：

解决方法

我会请求您使用CSS的外观属性,该属性负责这样的组件.所以设置外观：没有一个会显示出来：对于组件的外观,这是你需要的.你很好地使用这一点的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