使用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来控制radioinput[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;}嘘嘘嘘嘘嘘