我从codepen复制了一个复选框代码.它改变后我的偏好,但问题是,如果单独一个复选框(只有一个检查其上面的一个),它的工作原理是完美的.是否有任何方法可以使ecah中的ecah独立工作,而无需在每次需要时更改类和id.骗子在这里
HTML
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
CSS
.roundedOne {
width: 20px;
height: 20px;
position: relative;
background: #fcfff4;
border: 2px solid #77c100;
border-radius: 3px;
}
.roundedOne label:after {
content: '';
width: 14.5px;
height: 15px;
position: absolute;
top: 2px;
left: 2px;
background: #77c100;
opacity: 0;
border-radius: 3px;
}
.roundedOne label:hover::after {
opacity: 0.3;
}
.roundedOne input[type=checkbox] {
visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
opacity: 1;
}