这篇博客讨论了如何使用CSS隐藏单选按钮以避免触发浏览器的本机错误消息，同时提供了示例代码展示如何实现。博主强调，这种方法不会在未提交表单时进行验证，并建议使用jQuery或JavaScript来实现即时验证。文章还涉及了相关样式设计和验证机制。
正如@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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
