have css checkbox whithoud id and for? - html

Question

How i can make a css ckeckbox+lebel without id and for .
I use this way but it dosnt work.i can have a css ckeckbox whit id and for like this :
<div class="checkbox">
<input id="f" type="checkbox" name="hi" class="checkbox" />
<label for="f">Hello</label>
</div>
But i wanna to have this :
<label class="checkbox">
<input type="checkbox" value="1" name="files" >
</label>
Then i use This CSS (SCSS in fact):
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 dosnt work */
.checkbox:after > input[type=checkbox]:checked {
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
But Checked check box dost show ?
Please help :)

Answer 1

You must use span in your Label tag.
.checkbox:after > input[type=checkbox]:checked
This line not make sense because its need to be the opposite. So I'm change it to this:
input[type=checkbox]:checked ~ .checkbox:after
When you check ~ do something with the next element.
So, i add a span to complete your problem. Here we go:
Working Fiddle
$blue : blue;
$black : black;
label{
input[type=checkbox]{
opacity: 0;
}
}
.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 dosnt work */
input[type=checkbox]:checked ~ .checkbox:after{
font-family: 'FontAwesome';
font-size: 1em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<label>
<input type="checkbox" value="1" name="files" >
<span class="checkbox"></span>
</label>