[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

チェックボックスを自分のオリジナルのボタンにしてみたいという方はいらっしゃるかと思います。今回はその方法についてご紹介していきたいと思います。ぜひオリジナルのボタンを作ってみてください。

HTMLの構造

チェックボックスをオリジナルのデザインにしてみようというお話ですが、HTMLの構造は別段特別な構造にする必要はありません。作り方は、以前のブログでご紹介させていただいた、チェックボックスを押す代わりに文字を押すことでチェックされるものの応用になります。

<input type="checkbox" name="original_checkbox" id="original_checkbox" value="on"><label class="label" for="original_checkbox">Click Here</label></input>

サンプル実装例

この方法は以前ご紹介させていただい通りです。文字をクリックするとチェックボックスがクリックされるようになりますね。次はこちらを cssでオリジナルデザインにしていきましょう。

CSSのご紹介

まずチェックボックスのボタンをcssで消去します。そして文字の所のlabelのデザインを変えることで、オリジナルのデザインになることを目指します。
まずは、チェックボックスを消してみましょう。

<style>
 input[type="checkbox"]#original_checkbox{
   display:none;
 }
</style>
<input type="checkbox" name="original_checkbox" id="original_checkbox" value="on"><label class="label" for="original_checkbox">Click Here</label></input>

サンプル実装例

チェックボックスが消えましたね。ただこの状態では、Click Hereと書かれている文字があるだけでクリックされているかどうかわかりませんね。

クリックされた時に文字色が変わるようにしてみましょう。

<style>
 input[type="checkbox"]#original_checkbox{
   display:none;
 }
input[type="checkbox"]#original_checkbox:checked + label{
 background:#000;
 color:#fff;
}
</style>
<input type="checkbox" name="original_checkbox" id="original_checkbox" value="on"><label class="label" for="original_checkbox">Click Here</label></input>

サンプル実装例

上記のように input[type=”checkbox”]:checked +labelと記述しますと、チェックされた時のlabelに対して、cssを割り当てることができます。今回は、クリックされた時に背景を黒く、文字を白くしてクリックされていのがわかるようにしてみました。
次はこれをもうちょっとボタン風に切り替えてみましょう。

<style>
 input[type="checkbox"]#original_checkbox{
   display:none;
 }
.label{
   padding-left:10px;
   padding-right:10px;
   padding-top:5px;
   padding-bottom:5px;
   border:1px solid #000;
   border-radius:5px;  
 }
input[type="checkbox"]#original_checkbox:checked + label{
 background:#000;
 color:#fff;
}
</style>
<input type="checkbox" name="original_checkbox" id="original_checkbox" value="on"><label class="label" for="original_checkbox">Click Here</label></input>

サンプル実装例

上記のように labelに対してボタンのようになるようにcssをデザインしてみました。いかがでしょうか。checkboxに見えないようなデザインになりましたね。

まとめ

今回は、オリジナルのチェックボックスを作る方法をご紹介させていただきました。今回のお話は、checkboxのボックスを見た目上削除して、labelに対してcssを当てることで、オリジナルのデザインを作るといったものです。また、input[type=”checkbox”]:checkedという記述でクリックされた状態をjsではなくcssで記述できるため非常にわかりやすい作りになっているのではないでしょうか。この記事が少しでも何かの参考になれば幸いです。