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

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

非***扰分类：JavaScript 人气：1225 回帖：3 发布于6年前收藏

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

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

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

标签：css3 css html5 javascript

讨论这个帖子（3）垃圾回帖将一律封号处理……

Lv6 码匠

旧***＊软件测试工程师 6年前#1

其实你可以直接将其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>

Lv5 码农

pa***in 技术总监 6年前#2

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

大概是这样吧，我没去看，不知道样式准不准

Lv5 码农

转***鬼职业无 6年前#3

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

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取