カスタム入力ラベルに必要なメッセージを表示するにはどうすればいいですか？

Question

更新：私は、ブラウザでは入力を見えるようにしてユーザーには見えないようにすることで問題を解決しました。これらの変更をCSSに加えることができました。

.radio-checked { 
     opacity:0; 
     position: absolute; 
     z-index: -1; 
} 

QUESTION：

は私が私のフォームでカスタム入力を備えています。私はそれらを隠す...

display:none; 

...異なって見えるようにCSSでスタイリング。私のコードの

例：ここでは

<input id="radio-input" class="radio-check" type="radio" name="odeme"> 
<label for="radio-input" class="radio-label">Option Name</label> 

は、それがどのように動作するかを示すためのフィドルです。あなたが検証メッセージが表示されませんで入力要素を非表示にしたときに

https://jsfiddle.net/kjaL1zbd/

問題は、あります。

https://jsfiddle.net/kjaL1zbd/1/

だから、ラベルにこのメッセージを表示するためにどのような方法があります：あなたはここでは例を見ることができますか？それとも、これに対する解決策はありますか？

Answer 1

/* RADIO CUSTOM */ 
 
form { 
 
    position: relative; 
 
    display: block; 
 
} 
 
.radio-check { 
 
\t //visibility:collapse; 
 
    margin-left: 22px; 
 
} 
 
.test { 
 
    margin-left: 110px; 
 
} 
 
.radio-label { 
 
\t position:absolute; 
 
\t padding-left:20px; 
 
\t //margin:10px 40px 10px 0px; 
 
\t cursor:pointer; 
 
    left:20px; 
 
\t } 
 
.radio-label:before { 
 
\t content:""; 
 
\t display:block; 
 
\t width:15px; 
 
\t height:15px; 
 
\t background-color:#fff; 
 
\t border:1px solid #ddd; 
 
\t border-radius:100px; 
 
\t top:0; 
 
\t left:0px; 
 
\t position:absolute; 
 
\t -webkit-transition:all .2s ease; 
 
\t transition:all .2s ease; 
 
\t } 
 
.radio-label:hover:before{ 
 
\t border:1px solid #4198d3; 
 
\t } 
 
input[type="radio"]:checked + .radio-label:after { 
 
\t content:""; 
 
\t width:11px; 
 
\t height:11px; 
 
\t display:block; 
 
\t position:absolute; 
 
\t top:3.3px; 
 
\t left:3.3px; 
 
\t background-color:#4498ff; 
 
\t background-repeat:no-repeat; 
 
\t background-position:center; 
 
\t background-size:11px; 
 
    border-radius:100px; 
 
\t } 
 
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>