質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.92%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,191

score 9

 発生している問題

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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 20:27

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

    キャンセル

  • 2018/08/19 22:26 編集

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

    キャンセル

  • 2018/08/19 23:16

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る