html - 从自定义样式 radio 中删除“边框”

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;属性。另外，一个演示会很好。