ラジオボタンをcssでカスタマイズしたらrequiredのエラーメッセージが表示されない

発生している問題

ラジオボタンで質問を作っているのですが
CSSでカスタマイズしたら、sugmitボタンを押した際、requiredでエラーメッセージを出す設定が効かなくなりました。
CSSの書き方が原因でしょうか。出てくるようにするにはどうすればよいでしょうか。
ちなみにCSSを切った状態だとエラーメッセージが表示されます。

【htmlソース】

<form action="http://******.jp/cgi-bin/sample.cgi" method="post"> <p><span>Q14.</span>きちょうめんな性格だと思う</p> <input type="radio" name="q14" value="3" required id="q14answer3"><label for="q14answer3">そう思う</label> <input type="radio" name="q14" value="2" required id="q14answer2"><label for="q14answer2">どちらでもない</label> <input type="radio" name="q14" value="1" required id="q14answer1"><label for="q14answer1">そう思わない</label> <p class="txt_center mt20"><input type="submit" name="送信" value="診　断" class="btn_submit btn_submit_l">

【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ボタンを押せば、ラジオボタンのところにふきだしでエラーメッセージが表示されます。

行動規範の内容に同意します

回答1件

ベストアンサー

質問中のコードでは、コンソールに
An invalid form control with name='q14' is not focusable.
というエラーが出ていました。
理由はこれですね。

非表示の<input>要素ではフォームバリデーションが実行されない - Firefoxサイト互換性情報

ラジオボタンの display: none; を消し、
位置調整でラジオボタンが見えないようにしたら良いです。

    <head>
        <meta charset="utf-8">
        <title>サンプル</title>
        <style>
        .txt_center {
            text-align: center;
        }
        .taiken input[type="radio"] {
            /* label に背景色を設定したくないなら opacity: 0; で見えなくする */
            width: 1rem; /* 追加 */
            margin-right: .5rem; /* 追加 */
        }
        .taiken label {
            display: inline-block;
            margin-left: -1.5rem; /* 変更 */
            padding: .5em .5em; /* 変更 */
            text-align: center;
            background-color: #FFF;
            border: 1px solid silver;
            border-radius: 3px;
        }

        .taiken input[type="radio"]:checked + label,
        .taiken label:hover {
            background: #f5c4ac;
        }

        /* 以下のCSSを追加 */
        @media (max-width:480px) {
            .taiken .answer-wrapper {
                text-align: center;
                font-size: smaller;
            }
        }
        @media (min-width:481px) {
            .taiken label {
                padding: .5em 1em;
            }
        }
        </style>
    </head>


    <body>
        <!-- https://teratail.com/questions/141946 -->

        <form action="#" method="post" class="taiken">
            <p><span>Q14.</span> きちょうめんな性格だと思う</p>

            <p class="answer-wrapper">
                <input type="radio" name="q14" value="3" required id="q14answer3"><label for="q14answer3">そう思う</label>
                <input type="radio" name="q14" value="2" required id="q14answer2"><label for="q14answer2">どちらでもない</label>
                <input type="radio" name="q14" value="1" required id="q14answer1"><label for="q14answer1">そう思わない</label>
            </p>

            <p class="txt_center"><input type="submit" name="送信" value="診断"></p>
        </form>

    </body>
</html>

投稿2018/08/19 09:05

編集2018/08/19 13:54

takna

総合スコア784

kumiel

2018/08/19 11:27

ありがとうございます。このやり方は思いつきませんでした。ところで、こちらはレスポンシブのページなのですが、margin-left: -1rem; で位置をずらすと、ボタンの配置もずれてしまいます。このズレを直すには、どうすればよいのでしょうか。

takna

2018/08/19 13:58 編集

ボタン（label）の文字サイズと余白で320px幅でも崩れないように調整しました。ユーザーが文字を大きく設定したら崩れるのにも対処するなら、メディアクエリでモバイル表示なら縦並びにするなどして調整してください。あと、ラジオボタン選択状態時のハイライトが見えてしまうのも直しました。 (確認ブラウザは Mac の Safari, Chrome, Firefox です)

kumiel

2018/08/19 14:16

うまくいきました。ありがとうございました。

行動規範の内容に同意します