triBlog

トリアナのブログ。

WEB制作
フロントエンド

チェックボックスをおしゃれにしたら、validationが効かなかった事について

私の身体も、CSSを重ねたら少しは細くごまかせるかしら・・・。
ライター画像
あべ

こんにちは〜、おたコーダーのあべです。

昨今のCSSの進化でラジオボタンやチェックボックをおしゃれに装飾できるようになりました。
しかし、せっかく装飾したのにフォームでjquery validationが効いてくれないという問題にぶつかりました。

どうしたら回避できるかなと試行錯誤したので、メモ的な感じでご紹介いたします。

なんで効かないの?

フォームの中でラジオボタン、チェックボックスをCSSで装飾した際に問題は発生しました。
あれ、デフォルトのHTMLなら効いたのに、装飾したら効かなくなった。

どうやら、デフォルトのデザインのものをdisplay:noneにしてしまったため、無いものとして扱われてしまったようです。
(デフォルト仕様で、display:noneの項目はバリデーションをチェックされない)

サンプルHTML

validationが効かないサンプルCSS

※サンプルとして’FontAwesome’のアイコンを利用しております。
※before要素でアイコンを表現しています。

解決方法を考える

原因から、回避方法を考えてみました。
そこで私がおもいついたのが「見えてないとダメなら重ねて普通には見えないようにしてしまおう!」でした。
デフォルトのアイコンの上に画像とかのの領域を重ねて、表から見えないようにしたらいけるんじゃ。
(突然の来客に、パジャマとか部屋着とかを布団の中にとりあえず突っ込むのに似てるね)

断面図

実装してみたよ

書いてみたCSSがこちら。(HTMLに変更はないので省略します。)
・可能な限り、デフォルトのアイコンはCSSで縮小化、透過させて目立たないようにしました。
・span::beforeに背景色を入れることで、デフォルトアイコンを覆いました。

validation効くようにしたサンプルCSS

問題なく動くことを確認したので、完成です。
解決方法の一つとしてご参考に。

応用すれば、ラジオボタンにも実装が可能です。
ベースのCSSによってズレが生じると思いますので、そこはご調整ください。

ほかにも、デフォルトのチェックボックス指定を「display:none」をやめて、「visibility: hidden」に変更する方法もあるようですので、自分にあった方法をさがしてみてください。

オタ的な近状

ツイステで推しが来たのでオクタヴィネルの3人が奇跡的にそろいました。
とうらぶで刀剣を急に60振り近くキャンペーンでもらってしまい、整理するの大変でした。


WEBサイトなどのご相談はこちらからどうぞ

記事を書いた人

ライター画像
あべ ママコーダー

コード打って、オタ活して、3人の子育てママして、人妻してる書けないくらいclass属性だけは多いコーダーです。

ライター画像
あべ ママコーダー

コード打って、オタ活して、3人の子育てママして、人妻してる書けないくらいclass属性だけは多いコーダーです。

ページ上部へ