如何在自定义输入标签上显示所需的消息？

Question

更新：我通过使输入对浏览器可见但对用户不可见来解决了这个问题。对 CSS 进行这些更改是有效的。

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

问题：

我的表单中有自定义输入。我用...隐藏它们

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 {
	//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>