从自定义样式广播中删除“边框”

Question

这是我的HTML：

<div class="gender-options">
<label title="item1">
<input type="radio" name="gender" value="male" /> 
<img /> 
Musko   
</label>
<label title="item2">
<input type="radio" name="gender" value="female" />
<img />
Zensko
</label>
</div>

这是我的CSS：

div.gender-options > label > input {
visibility: hidden;
color: #b8b9bd;
}

div.gender-options > label > img {
display: inline-block;
padding: 0px;
height:20px;
width:20px;
border: 0px;
background: url("../img/icons/checkbox.png");
}

div.gender-options > label > input:checked +img {  
background: url("../img/icons/checkbox_checked.png");
background-repeat: no-repeat;
background-position:center center;
background-size:20px 20px;
border: 0px;
}

一切正常，但我遇到了一些边框问题，如果我删除background它只是一个空白边框;我只是想删除那个边界。

这是图像（我的蓝色复选框上的白色边框）：

Answer 1

尝试添加outline: none;属性。此外，演示会很好。

Answer 2

据我说这个边框出现在你的单选按钮上，所以visibility:hidden对你来说效果不好在这里用你的css删除你的单选按钮：

div.gender-options > label > input {
  position:absolute;
  clip:rect(0,0,0,0);
}

Clip属性会隐藏您的广播输入，并且该问题将不存在，但请记住clip属性仅适用于position:absoulte属性。