css - 在隐藏的单选框/复选框上显示 HTML5 错误消息/验证

Question

我有 CSS 自定义的单选按钮，它们需要验证。默认单选按钮由 CSS 规则隐藏。

当我提交表单时，默认验证消息也是隐藏的。

表格看起来像这样

如何在禁用单选按钮时显示默认错误消息(如:请选择其中一个选项)？ (不使用Js的纯HTML/CSS)

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  visibility: hidden;
}

input[type="radio"]:checked +label {
  border: 1px solid blue;
}

<h3>Gender</h3>

<input id="male" type="radio" name="gender" value="male" required>
<label for="male">Male</label>

<input id="female" type="radio" name="gender" value="female" required>
<label for="female">Female</label>

<input id="other" type="radio" name="gender" value="other" required>
<label for="other">Rather not to say</label>

Answer 1

正如@joostS 所说，隐藏的单选按钮不会触发 native 错误消息。为此，我们需要使用不透明度来隐藏它。我已经创建了示例。

在我们通过单击提交按钮提交表单之前，它也不会触发验证。如果您需要对任何表单元素的“onChange”事件进行验证，那么我们需要使用 jQuery 或 Javascript 解决方案来实现。

希望对您有所帮助。

label {
	display: inline-block;
	border: 2px solid #83d0f2;
	padding: 10px;
	border-radius: 3px;
	position: relative;
}

input[type="radio"] {
  opacity: 0;
	position: absolute;
	z-index: -1;
}

input[type="radio"]:checked +label {
  border: 1px solid #4CAF50;
}

input[type="radio"]:invalid +label {
  
}

<h3>Gender</h3>
<form>
	
	
		<input id="male" type="radio" name="gender" value="male" required> 
	<label for="male">Male</label>

	
		<input id="female" type="radio" name="gender" value="female" required> 
	<label for="female">Female</label>

	
		<input id="other" type="radio" name="gender" value="other" required>
	<label for="other">Child</label>

	<input type="submit" />
</form>