使用rgba怎么把一个单选框或者复选框设置为透明？

Question

input[type="radio"]{background:rgba(0,0,0,0);}为什么我这样写无效呢？想用rgba将单选框设置为透明，然后通过伪元素设置样式来重置单选框的默认样式。

Answer 1

给input[type="radio"]设置-webkit-appearance:none;再配合background:rgba(0,0,0,0)就可以把原生样式隐藏了，然后再通过伪元素设置新的样式。
                            

Answer 2

其实你可以直接将其display:none隐藏的，用labelforid来绑定input，点击label来控制radio
input[type="radio"]{
opacity:0;
}
input[type="checkbox"]:checked+label:after{
content:'\2714';
background-color:#ff5757;
color:#FFF;
border-color:#ff5757;
}
input[type="checkbox"]{
display:none;
}
label:after{
content:'';
position:absolute;
left:0;
top:0;
width:18px;
height:18px;
border:1pxsolid#CCC;
box-sizing:border-box;
line-height:18px;
text-align:center;
border-radius:3px;
font-size:14px;
}
label{
position:relative;
padding-left:25px;
box-sizing:border-box;
line-height:20px;
font-size:14px;
height:20px;
}
#top{
margin:100px;
}
input[type="checkbox"]:checked~img{
transform:translateX(500px);
}
#img{
transition:all1s;
}
嘘嘘嘘嘘嘘