HTML单选按钮CSS样式：删除默认的灰色圆圈

Question

HTML单选按钮在加载时周围有灰色的圆圈.有什么办法可以去除单选按钮圆圈周围的灰色圆圈吗？

Answer 1

你可以使用这个属性。但是在它之后，你需要为单选按钮编写你自己的自定义样式。

input[type='radio'] {
    -webkit-appearance:none;
}

比如说，这里的圆圈是绿色的。这里这个圆圈是绿色的。

input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:3px solid green;
    border-radius:50%;
    outline:none;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px red inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:60%;
    height:60%;
    margin: 20% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

<input type='radio' name='a' checked/>
<input type='radio' name='a'/>