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

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

我是这样做的:

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但它没有帮助.有人可以帮我这个吗？

他们现在看起来像这样:

我会要求你使用appearanceCSS 的属性,它负责这样的组件.因此,设置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:
 

Radios: