狼読

 
2020/05/01

[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で記述できるため非常にわかりやすい作りになっているのではないでしょうか。この記事が少しでも何かの参考になれば幸いです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読