使用rgba怎么把一個單選框或者復(fù)選框設(shè)置為透明？

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

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

為什么我這樣寫無效呢？想用rgba將單選框設(shè)置為透明，然后通過偽元素設(shè)置樣式來重置單選框的默認(rèn)樣式。

回答

編輯回答

臭榴蓮

其實你可以直接將其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>

2018年3月11日 09:00

編輯回答

過客

用opacity:0絕對定位

<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>

大概是這樣吧，我沒去看，不知道樣式準(zhǔn)不準(zhǔn)

2017年11月16日 14:34

編輯回答