質問: ### 発生している問題 ラジオボタンで質問を作っているのですが CSSでカスタマイズしたら、sugmitボタンを押した際、requiredでエラーメッセージを出す設定が効かなくなりました。 CSSの書き方が原因でしょうか。出てくるようにするにはどうすればよいでしょうか。 ちなみにCSSを切った状態だとエラーメッセージが表示されます。 【htmlソース】 Q14.きちょうめんな性格だと思う そう思う どちらでもない そう思わない 【CSS】 .taiken input[type=radio] { display: none; /* ラジオボタンを非表示にする */} .taiken label { /*.labelクラスセレクタ*/ margin: 5px; /* ラベル外側の余白を指定する */ border: 1px solid #861b20;/* ラベルの境界線を実線で指定する */ display:inline-block; vertical-align:top; width: 200px; /* ボックスの横幅を指定する */ height: 25px; /* ボックスの高さを指定する */ padding:1% 2%; text-align:center; cursor: pointer; /* マウスカーソルの形(リンクカーソル)を指定する */ border: 2px solid #861b20;/* ボックスの境界線を実線で指定する */ border-radius: 5px; /* 角丸を指定する */ } .taiken input[type="radio"]:checked + label { background: #f5c4ac;/* マウス選択時の背景色を指定する */ } .taiken label:hover { background-color: #f5c4ac; /* マウスオーバー時の背景色を指定する */ } CSSを切ると、submitボタンを押せば、ラジオボタンのところにふきだしでエラーメッセージが表示されます。
回答: 質問中のコードでは、コンソールに `An invalid form control with name='q14' is not focusable.` というエラーが出ていました。 理由はこれですね。 非表示の要素ではフォームバリデーションが実行されない - Firefoxサイト互換性情報 ラジオボタンの `display: none;` を消し、 位置調整でラジオボタンが見えないようにしたら良いです。 ``` サンプル Q14. きちょうめんな性格だと思う そう思う どちらでもない そう思わない ```