公開日：2020.9.07｜最終更新日：2020.9.07

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

公開日：2020.9.07｜最終更新日：2020.9.07

私の身体も、CSSを重ねたら少しは細くごまかせるかしら・・・。

あべ

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

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

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

なんで効かないの？

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

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

サンプルHTML

<label class="checkbox">
<input name="customer_from[]" type="checkbox" value="OK">
<span>チェックするよ</span>
</label>

<span>チェックするよ</span>

</label>

validationが効かないサンプルCSS

/* 問題部分 */
.checkbox input[type=checkbox]{display: none;}
.checkbox span::before{
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
  display:inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
font-family: 'FontAwesome';
  content: "\f00c";
  color: #F2F2F2;
  font-size: 14px;
	background-color:#fff;
	margin-right:5px;
}
.checkbox input[type=checkbox]:checked ~ span::before{
border: 1px solid #bbb;
font-family: 'FontAwesome'; 
content: "\f00c";
color: #fff;
font-size: 14px;
background: #74b816;
background-size:10px;
}

/* 問題部分 */

.checkbox input[type=checkbox]{display: none;}

.checkbox span::before{

-webkit-transition: border-color 0.1s linear;

transition: border-color 0.1s linear;

display:inline-block;

width: 16px;

height: 16px;

border: 1px solid #bbb;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

font-family: 'FontAwesome';

content: "\f00c";

color: #F2F2F2;

font-size: 14px;

background-color:#fff;

margin-right:5px;

}

.checkbox input[type=checkbox]:checked ~ span::before{

border: 1px solid #bbb;

font-family: 'FontAwesome';

content: "\f00c";

color: #fff;

font-size: 14px;

background: #74b816;

background-size:10px;

}

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

解決方法を考える

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

断面図

実装してみたよ

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

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

.checkbox span{
/* 重ねるので position: relative; 指定*/
position: relative;
padding-left:10px;}

/* 隠れていたデフォルトデザイン部分を最小化 */
.checkbox input[type=checkbox]{
opacity:0;height:0;width:0; margin:0 14px 0 0; padding:0; min-height:1px; border:0; border-radius:0; font-size:0;
}

.checkbox span::before{
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;

/* 重ねるので重ねる位置を指定 */
  position: absolute;
  top:0;
  left: -14px;

  display:inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
font-family: 'FontAwesome';
  content: "\f00c";
  color: #F2F2F2;
  font-size: 14px;
	background-color:#fff;
}

.checkbox input[type=checkbox]:checked ~ span::before{
border: 1px solid #bbb;
font-family: 'FontAwesome'; 
content: "\f00c";
  color: #fff;
  font-size: 14px;
background: #74b816;
background-size:10px;
}