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

input[type="radio"]{
    background:rgba(0,0,0,0);
}

<input style='width:0.3rem;height:0.3rem;' type="radio" name="" id="" value="" />

为什么我这样写无效呢？想用rgba将单选框设置为透明，然后通过伪元素设置样式来重置单选框的默认样式。

阅读 3.8k

其实你可以直接将其display:none隐藏的，用label for id 来绑定input，点击label来控制 radio

input[type="radio"]{
   opacity: 0;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="normalize.css"/>
        <style type="text/css">
           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: 1px solid #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: all 1s; 
           }
        </style>
    </head>
    <body>
    <div id="top">
            <input type="checkbox" id="mycheck"/>
            <label for="mycheck">嘘嘘嘘嘘嘘</label>
            <img src="2.jpg" id="img" alt="" />
    </div>    
    </body>
</html>

<style> .radio{position:relative;border-radius:50%;border:1px solid #bbb;width:0.3rem;height:0.3rem;} .radio input{ position:absolute;width:100%;height:100%;opacity:0;left:0;top:0;z-index:2; } .radio span{position:absolute;border-radius:50%;width:50%;height:50%;left:50%;top:50%;margin-left:-25%;margin-top:-25%;background:#fff;transition:background 0.4s;} .radio input:checked + span{background:#000;} </style> <div class="radio"> <input type="radio" > <span></span> </div>

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？