Is it possible to create a CSS checkbox with label without using id and for attributes?
I have tried the following method, but it doesn't seem to work. I know that I can create a CSS checkbox with id and for attributes like this:
<div class="checkbox">
<input id="f" type="checkbox" name="hi" class="checkbox" />
<label for="f">Hello</label>
</div>
However, I want to achieve this instead:
<label class="checkbox">
<input type="checkbox" value="1" name="files" >
</label>
So, I am using this CSS (SCSS actually):
label{
input[type=checkbox]{
display: none;
}
}
.checkbox{
position: relative;
display: inline-block;
margin-right: 7px;
cursor: pointer;
vertical-align: middle;
&:after{
content: ' ';
position: absolute;
border: 2px solid $black;
border-radius: 3px;
width: 20px;
height: 20px;
top: -5px;
left: -2px;
width: 14px;
height: 14px;
}
&:checked{
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
}
/* It doesn't work */
.checkbox:after > input[type=checkbox]:checked {
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
Unfortunately, the checked checkbox is not showing up. Any suggestions? Please help :)