如何使我的复选框透明?它确实适用于文本字段和按钮,但似乎不适用于复选框。这是我的代码的形式。
#checkbox {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.08);
}
<div class="checkbox check-transparent">
<label>
<input type="checkbox" id="checkbox">Onthoud mij
</label>
</div>
对于常规复选框,唯一可以做的就是通过降低其不透明度使其透明,但如果选中,它也会使内部的刻度线变亮。解决方法是,将复选框包裹在 div 中,并在选中时更改复选框的颜色,如下面的代码片段所示:
#checkb {
width: 20px;
height: 20px;
cursor: pointer;
background: rgba(40,40,40,0.2);
color:black;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
left: -5px;
top: -5px;
}
#checkb:checked {
background: rgba(40,40,40,0.7);
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="checkbox-container">
<input type="checkbox" id="checkb"/> Input
</div>
我是一名优秀的程序员,十分优秀!