How to show required message on custom inputs label? - html

Question

UPDATE: I solved the problem by making inputs visible for browser but not for user. Making those changes to CSS worked.
.radio-checked {
opacity:0;
position: absolute;
z-index: -1;
}
QUESTION:
I have custom inputs in my form. I hide them with...
display:none;
...then styling with css to look different.
Example of my codes:
<input id="radio-input" class="radio-check" type="radio" name="odeme">
<label for="radio-input" class="radio-label">Option Name</label>
Here is a fiddle for showing how it works.
https://jsfiddle.net/kjaL1zbd/
Problem is, when you hide the input element the validation message is won't show up. You can see example here:
https://jsfiddle.net/kjaL1zbd/1/
So is there any way to show this message on the label? Or is there any solution for this?

Answer 1

/* RADIO CUSTOM */
form {
position: relative;
display: block;
}
.radio-check {
//visibility:collapse;
margin-left: 22px;
}
.test {
margin-left: 110px;
}
.radio-label {
position:absolute;
padding-left:20px;
//margin:10px 40px 10px 0px;
cursor:pointer;
left:20px;
}
.radio-label:before {
content:"";
display:block;
width:15px;
height:15px;
background-color:#fff;
border:1px solid #ddd;
border-radius:100px;
top:0;
left:0px;
position:absolute;
-webkit-transition:all .2s ease;
transition:all .2s ease;
}
.radio-label:hover:before{
border:1px solid #4198d3;
}
input[type="radio"]:checked + .radio-label:after {
content:"";
width:11px;
height:11px;
display:block;
position:absolute;
top:3.3px;
left:3.3px;
background-color:#4498ff;
background-repeat:no-repeat;
background-position:center;
background-size:11px;
border-radius:100px;
}
form{
margin:50px 0;
}
<form>
<input id="ben" class="radio-check" type="radio" name="odeme" required>
<label for="ben" class="radio-label">Option Name</label>
<input type="submit" class="test">
</form>
Click submit button to see the problem. Top is custom, bottom is default.
<form>
<input id="ben" type="radio" name="odeme" required>
<label for="ben" >Option Name</label>
<input type="submit">
</form>