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>

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

1 个答案: