I have CSS-customized radio buttons, which have required validation. The default radio buttons are hidden by CSS rule.
When I submit the form, the default validation message is also hidden.
How can I display default error message (like: Please select one of the options) while disabling radio buttons? (Pure HTML/CSS without using Js)
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>
See Question&Answers more detail:os