【CSS】チェックボックスをCSSで装飾する方法

皆さん、Xin Chao(シンチャオ：こんにちは)！

海外が好きなので週末に弾丸で海外に行ったりするんですが、

金曜の夜出国⇒土曜早朝到着⇒日曜夜出国⇒月曜早朝成田着⇒そのまま出勤という、多忙すぎる社長のようなスケジュールをこなしました、愛原です。

※流石に寿命を削り過ぎたので、「もう二度としない。」とママに誓いました。

ということで今回はベトナムのハノイに行ってきました。

・・・？

・・・・？？！！！！！

・・・chúa（チュア：神）

滞在中、食事の9割9分9厘が1杯150円のフォーだったので、旅の後半にもなると口癖が「ナイスパクチー！！」になったのは言うまでもありません。

更に宿は1泊500円の8人部屋という、闇金ウシジマくんにでてきそうな部屋をチョイスしました。

幾多の旅人たちの汗が染み込み、香ばしい香りを放つ枕や布団…。

更に、下段ベッドの外国の方から絶え間なく鼻腔をついてくるワキガ臭は、それはそれは僕を恍惚状態にさせるのでした…///照。

今回のミッション：チェックボックスにCSSをあてたい！

さて、依然として恍惚状態な僕ですが、先日案件でチェックボックスを小洒落にするというミッションを与えられました。

最初は「ファッッ？？？！！！チェックボックスを装飾とか？？！！！意味分かんない！！無理！！！ベトナム帰る！！！ナイスパクチー！！！」とブチ切れて格安航空券を探していたのですが、色々調べたら案外できたので帰らずにすみました。よかった…。

なので今回はそのやり方をあなた！にお伝えします。

結論は「チェックボックス自体は装飾ができないので、非表示にして代わりにラベルタグを装飾して、チェックボックスと紐付ける」です。

すみません、意味わからないですよね、ブチ切れないでください。おいしいフォー奢るから。ね？！！ね？？！！！

早速見てみましょう。ナイスパクチー！！！

①チェックボックスにスタイルは当てられない

チェックボックスとは、これです。お問い合わせフォームでよくみる、アイツです。

htmlで書くとこうなります。

<p class="ttl01">あなたの好きなベトナムの都市は？？</p>
<div class="radio">
  <input type="checkbox" class="radioBtn" id="radio01" name="grp01">ハノイ<br>
  <input type="checkbox" class="radioBtn" id="radio02" name="grp01">ホーチミン<br>
  <input type="checkbox" class="radioBtn" id="radio03" name="grp01">ダナン<br>
</div>

<p class="ttl01">あなたの好きなベトナムの都市は？？</p>

<input type="checkbox" class="radioBtn" id="radio02" name="grp01">ホーチミン<br>

</div>

お問い合わせフォームに使われるアイツです。

今回はこれを

こんな小洒落た感じにします。

ただ、このチェックボックス自体にはスタイルが効かないので、非表示にしてしまいます。

エイッッッッ☆☆

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

input[type=checkbox]{

display: none;

}

…スタイルが効かない理由はなにかって？？

あなたはメコン川が上流から下流に流れていく理由を考えたことありますか？
…そういうものなのです。

深く考えないで、メコン川の流れに身を任せましょう。エイッッッッ☆☆

②ラベルタグにスタイルを当てよう

チェックボックスに装飾ができないので、代わりにラベルタグにcssをあてます。

究極ざっくりベトナム風にというと、フォームのユーザビリティを爆上げしてくれる便利なタグです。

このラベルタグに対し、いい感じにcssをあてます。

ソースはこちら

input[type=checkbox]{
display: none;
}
label{
cursor: pointer;
}
.radioBtn03 + label{
padding-left: 20px;
position:relative;
margin-right: 20px;
}
.radioBtn03 + label::before{
content: "";
display: block;
position: absolute;
top: 7px;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 50%;
}
.radioBtn03:checked + label{
color:#2377BD;
}
.radioBtn03:checked + label::after{
content: "";
display: block;
position: absolute;
top: 10px;
left: 3px;
width: 11px;
height: 11px;
background: #2377BD;
border-radius: 50%;
}

input[type=checkbox]{

display: none;

}

label{

cursor: pointer;

}

.radioBtn03 + label{

padding-left: 20px;

position:relative;

margin-right: 20px;

}

.radioBtn03 + label::before{

content: "";

display: block;

position: absolute;

top: 7px;

left: 0;

width: 15px;

height: 15px;

border: 1px solid #999;

border-radius: 50%;

}

.radioBtn03:checked + label{

color:#2377BD;

}

.radioBtn03:checked + label::after{

content: "";

display: block;

position: absolute;

top: 10px;

left: 3px;

width: 11px;

height: 11px;

background: #2377BD;

border-radius: 50%;

}

③チェックボックスとラベルタグを紐付ける

最後に、①と②を紐付けます。

ここでのポイントはラベルタグのfor属性とチェックボックスのIDを同じにすることです。

<p class="ttl01">死ぬ前に食べたいものは？</p>
<div class="radio02">
  <input type="checkbox" class="radioBtn03" id="radio07" name="grp03">
  <label for="radio07">（当然）フォー</label><br>
  <input type="checkbox" class="radioBtn03" id="radio08" name="grp03">
  <label for="radio08">（本気で）フォー</label><br>
  <input type="checkbox" class="radioBtn03" id="radio09" name="grp03">
  <label for="radio09">（レイザーラモンHG）フォー！！</label>
</div>

<p class="ttl01">死ぬ前に食べたいものは？</p>

<label for="radio09">（レイザーラモンHG）フォー！！</label>

</div>

こうすることで、チェックが入ったラベルタグに紐付いたチェックボックスの情報をサーバーに送信することができます。

小洒落になりました☆

以上がチェックボックスを装飾する方法になります。簡単ですね。ナイスパクチー！！！！

まとめ

いかがでしたでしょうか？

フォームを作る機会がなかなか無いので、チェックボックスが装飾できないことも知りませんでしたが、意外になんとかなりました。

この記事があなたのためになれば幸いです。

さぁ次はどの国に行きましょうか…ラオスとミャンマーが気になりますのですが、オススメありますか？

それでは、Tam Biet(タンビエット)：さようなら！

Post Views: 1,764