html 验证后显示隐藏内容,在隐藏的收音机/复选框上显示HTML5错误消息/验证

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

它也不会在没有提交表单的情况下触发验证,如果你需要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 {

}

Gender

Male

Female

Child