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的appearance属性，该属性负责此类组件。因此，设置appearance: none将为组件的外观提供一种display: none，这是您所需要的。您可以很好地使用CSS的这一点来使组件不显示，同时将元素保留在 View 中:

-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

关于html - 从单选输入中删除边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34286322/