Css 在隐藏收音机上显示HTML5错误消息/验证/复选框

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

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

表单看起来像这样

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

input[type=“radio”]{
-webkit外观：无；
-moz外观：无；
外观：无；
可见性：隐藏；
}
输入[type=“radio”]：选中+标签{
边框：1px纯蓝色；
}

性别
男性
女性
不要说

您可以尝试使用CSS

：无效的

伪类。使用以下HTML：

<label for="male">Male</label>
<input id="male" type="radio" name="gender" value="male" required>
<span class="error-message">Please select on of the options</span>

给你

body{font size:15px；font-family:serif；}
输入{
背景：透明；
边界半径：0px；
边框：1px纯黑；
填充物：5px；
盒影：无！重要；
字体大小：15px；字体系列：衬线；
}
输入[type=“submit”]{padding:5px 10px；边距顶端：5px；}
标签{显示：块；填充：0 0 5px 0；}
表单>div{页边距底部：1em；溢出：自动；}
.隐藏{
不透明度：0；
位置：绝对位置；
指针事件：无；
}
.复选框标签{显示：块；浮动：左；}
输入[type=“radio”]+span{
显示：块；
边框：1px纯黑；
左边框：0；
填充物：5px10px；
}
标签：第一个子输入[type=“radio”]+span{左边框：1px纯黑色；}
输入[type=“radio”]：选中+span{background:silver；}

名称（可选）
性别
男性
女性
其他

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

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

我希望这会有帮助

标签{
显示：内联块；
边框：2px实心#83d0f2；
填充：10px；
边界半径：3px；
位置：相对位置；
}
输入[type=“radio”]{
不透明度：0；
位置：绝对位置；
z指数：-1；
}
输入[type=“radio”]：选中+标签{
边框：1px实心#4CAF50；
}
输入[type=“radio”]：无效+标签{
}

性别
男性
女性
小孩

没有解决方案？您需要使用另一种“隐藏”它们的方法，例如使用不透明度。虽然这是一个开放的问题，如果你把范围缩小到一个特定的框架，一些解决方案可能是可用的（例如symfony:）或使用javascript（为什么你用“javascript”和“jquery”标记，因为你要求的答案没有它们？不太清楚你在追求什么，隐藏，禁用…我将坚持@CBroe的方法。

input[name=gender] + .error-message { display: none; } // or whatever you wanna do with it
input[name=gender]:invalid + .error-message { display: block; }