An invalid form control with name=’~’ is not focusable.” error when “display:none;” is used for HTML5 radio buttons with CSS

An invalid form control with name=’~’ is not focusable.” error when “display:none;” is used for HTML5 radio buttons with CSS

When customizing radio buttons in HTML5 with CSS and setting the original radio button to display:none;, I was getting an “An invalid form control with name=’~’ is not focusable.” error on the Chrome console.

This error occurs because the radio button is required, and it can be handled by removing “required” or changing the value to “opacity: 0;”.

input[type=radio] {
  /*display: none;*/
  opacity: 0;
}

By changing to opacity, the design is now fine and the error no longer occurs because what is displayed is transparent.

The error message by required is a bit off, so it needs to be adjusted.

高橋