Custom checkmark not showing - html

Question

I am trying to create a custom radio checkbox but the checkmark is not showing for some reason, you cannot click and unclick to have the checkmark appear.
Is it possible to make it appear and clickable this checkmark?
input[type="checkbox"], input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.here .checkmark {
display: inline-block;
margin-right: 20px;
height: 40px;
width: 40px;
background-color: yellow;
}
.here .checkmark:hover {
background-color: red;
}
.here inp_cont:checked ~ .checkmark {
background-color: black;
}
.here .checkmark:after {
content: "";
position: absolute;
display: none;
}
.here inp_cont:checked ~ .checkmark:after {
display: block;
}
.here .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="here"><span class="checkmark"></span>
<input type="checkbox" checked="checked" name="hello" id="hello" class='inp_cont' required value="here" /> Click in the box</div>

Answer 1

There are a number of things wrong with your code (although not with your approach).
There is nothing for the user to click on. Solution: turn the span with class="checkmark" into a label for the input.
As #j08691 notices in the comments, inp_cont doesn't exist. Solution: change this to a selector for the checkbox; in this particular case, just input will do (since there is only one).
You have input:check ~ .checkmark in the CSS, but this will ony work if the .checkmark comes after the input in the source. Solution: swap them around.
And then it works.
input[type="checkbox"], input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.here .checkmark {
display: inline-block;
margin-right: 20px;
height: 40px;
width: 40px;
background-color: yellow;
}
.here .checkmark:hover {
background-color: red;
}
.here input:checked ~ .checkmark {
background-color: black;
}
.here .checkmark:after {
content: "";
position: absolute;
display: none;
}
.here input:checked ~ .checkmark:after {
display: block;
}
.here .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="here">
<input type="checkbox" checked="checked" name="hello" id="hello" class='inp_cont' required value="here" />
<label for="hello" class="checkmark"></label>
Click in the box</div>