HTML5のラジオボタンをCSSでdisplay:none;すると、An invalid form control with name=’～’ is not focusable.エラー

HTML5でラジオボタンをCSSでカスタマイズして、本来のラジオボタンをdisplay:none;にすると、Chromeのコンソール上で「An invalid form control with name=’～’ is not focusable.」エラーが発生していました。

このエラーが発生するのはラジオボタンにrequiredを指定しているためで、requiredを外すもしくはopacity: 0;に変更することで対応可能です。

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

opacityに変更することで表示されているものの透明なのでデザインも問題なく、エラーも発生しなくなりました。requiredによるエラーメッセージは少しズレるので調整が必要です。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

コメント