How to make the custom checkbox clickable

This is my checkbox css and html.

It hide the default checkbox and show customized checkbox.

And then, af first check mark is hidden opacity:0 then , make opacity:10 when checked.

However, when click it doesn't work.

Is there any problem ? please help me.

<input type="checkbox" id="walking" class="way" name="way"/><label for="walking" class="sample_label">Walking</label></p>
<input type="checkbox" id="driving" class="way" name="way"/><label for="driving" class="sample_label">Driiving</label></p>


<style>
input[type=checkbox] {
display: none; 
}
.sample_label {
position: relative; 
padding: 0 0 0 42px;
color:black;
}
.sample_label:hover:after {
border-color: #333666; 
}
.sample_label:after, .sample_label:before{
position: absolute; 
content: ""; 
display: block; 
top:56%; 
}
.sample_label:after {
left: 11px;
margin-top: -10px; 
width: 20px; 
height: 20px; 
border: 2px solid #ccc; 
border-radius: 12px; 
}
.sample_label:before {
left: 21px; 
margin-top: -7px;
width: 5px; 
height: 9px; 
border-right: 3px solid #0171bd; 
border-bottom: 3px solid #0171bd; 
opacity: 0; 
}
input[type=checkbox]:checked + .sample_label:before {
opacity: 10; 
}