スポンサーリンク
スパイラルでフォームを作成しています。
性別の項目はラジオボタンにしていますが、図の上の性別のようにボタンで表現したいと思っています。
ところが、スタイルシートで体裁を整えると、requiredのエラーメッセ―ジが表示されないという現象になってしまいました。
図はEdgeでのValidationエラー画面です。Edgeでは全てのエラーが一度にマークされるんですね。
GoogleChromeでは上の項目から１つずつエラーが表示されます。
スポンサーリンク
ラジオボタンのカスタマイズ（元）
元のＣＳＳは以下の通りです。
ラジオボタンは非表示にしてチェックされた時とマウスホバーした時にそれぞれスタイルを適用するようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/*--------------------------- ラジオボタンの設定 --------------------------- */ /* ラジオボタンは非表示にする */ input[type=radio] { display: none; } /* チェックされた時のスタイル */ input[type="radio"]:checked + label { background: #FAC090; color: #000; } /* マウスオーバーしたときのスタイル */ label.yesno:hover { background-color: #FDEADA; } /* lableのスタイル */ label.yesno { border: #dddddd solid 3px; color: #000; display: block; font-size: 20px; line-height: 60px; height: 60px; padding-left: 20px; padding-right: 20px; cursor: pointer; box-sizing: border-box; min-width: 106px; } /* 選択肢センタリング */ .smp_tmpl dl dd: { text-align: center; } |
どうしてRequiredが効かないのか？
答えは超シンプルでした！
非表示の<input>要素ではフォームバリデーションが実行されない
↑これだけ！
そうかぁ。。。
非表示にしたらダメなんですね…。
ラジオボタンを非表示にせずに非表示風にする方法
ラジオボタンを完全に非表示にするとＮＧなので、非表示ではなく透明化で対応します。
変更後のCSSです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/*--------------------------- ラジオボタンの設定 --------------------------- */ /* ラジオボタンは非表示にする */ <span style="color: #ff0000;">.oparadio input[type=radio] { position: absolute; opacity: 0; z-index: -1; }</span> /* チェックされた時のスタイル */ input[type="radio"]:checked + label { background: #FAC090; color: #000; } /* マウスオーバーしたときのスタイル */ label.yesno:hover { background-color: #FDEADA; } /* lableのスタイル */ label.yesno { border: #dddddd solid 3px; color: #000; display: block; font-size: 20px; line-height: 60px; height: 60px; padding-left: 20px; padding-right: 20px; cursor: pointer; box-sizing: border-box; min-width: 106px; } /* 選択肢センタリング */ .smp_tmpl dl dd: { text-align: center; } |
htmlソース
上のラジオボタンのみClassを適用してラジオボタンを透明化しました。
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="cf"> <dt class="title"> 性別 </dt><dd class="data multi1"> <ul class="radio cf <span style="color: #ff0000;">oparadio</span>"> <li><input class="input" type="radio" name="f002088421" value="男性" required id="gender1" $f002088421:rm$><label class="yesno" for="gender1"><span>男性</span></label></li> <li><input class="input" type="radio" name="f002088421" value="女性" required id="gender2" $f002088421:rf$><label class="yesno" for="gender2"><span>女性</span></label></li> </ul> <span class="msg">$error:f002088421$</span> </dd> </dl> |
カスタマイズの結果
EdgeではRequiredは有効になっているものの、赤枠表示はできなかったようです。
GoogleChromeでは、想定の動きをしてくれたのでこれでＯＫとしました。
最近、スパイラルで作ったフォームをカスタマイズするのが楽しくなってきました！
慣れると非Webエンジニアでもフォームを作れるのでおすすめです。
スポンサーリンク
スポンサーリンク
アマゾンの法人会員、「Amazonビジネス」活用してますか？
事務用品からノベルティ、インセンティブなど通販を活用すると非常に便利ですよね。
Amazonビジネスなら、請求書払い・見積書発行など法人に特化したサービスが受けられます。
＼Amazonビジネスをもっと活用しよう／
