title: Display HTML5 error message/validation on hidden radio/checkbox
body: <p>I have CSS-customized radio buttons, which have <strong>required</strong> validation. The default radio buttons are hidden by CSS rule.</p>
  
  <p>When I submit the form, the <strong>default validation message</strong> is also hidden.</p>
  
  <p><strong>Form looks like this</strong>
  <a href="https://i.stack.imgur.com/VcBHf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VcBHf.png" alt="CSS customized radio buttons"></a></p>
  
  <p>How can I display default error message (like: <strong>Please select one of the options</strong>) while disabling radio buttons? (Pure HTML/CSS without using Js)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility: hidden;
  }
  
  input[type="radio"]:checked +label {
    border: 1px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Gender&lt;/h3&gt;
  
  &lt;input id="male" type="radio" name="gender" value="male" required&gt;
  &lt;label for="male"&gt;Male&lt;/label&gt;
  
  &lt;input id="female" type="radio" name="gender" value="female" required&gt;
  &lt;label for="female"&gt;Female&lt;/label&gt;
  
  &lt;input id="other" type="radio" name="gender" value="other" required&gt;
  &lt;label for="other"&gt;Rather not to say&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>