ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。
やったことなかったんですが、やってみると結構面白い。
ソース
まずはソースを。
html
|
1 2 3 4 5 6 |
<input type="checkbox" name="" id="apple" class="input_css"> <label for="apple" class="label_css">りんご</label> <input type="checkbox" name="" id="kaki" class="input_css"> <label for="kaki" class="label_css">かき</label> <input type="checkbox" name="" id="orange" class="input_css"> <label for="orange" class="label_css">みかん</label> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/* 通常のinputをキャンセルする */ input[type=checkbox]{ display: none; } /*この要素は単なるinputとlabel_css*/ .label_css{ /* relativeがないとbefore afterが取れない*/ position: relative; /* inline-blockにしなくてもいいがその場合margin,paddingに制限がかかる*/ display: inline-block; padding: 0 0 0 42px; } /** 自力で作ったcheckboxの箱**/ .label_css::after{ position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #ccc; content: ''; } /* 自力で作ったcheckboxのチェックマーク 通常のブロックの左と下だけに色をつけて 傾ける。傾きはtransformで実装 checkされていないときは目に見えないわけだから opacity 0 */ .label_css::before{ position: absolute; top: 50%; left: 21px; display: block; margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #0171bd; border-bottom: 3px solid #0171bd; content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* checkされたときは外観のpropertyはすべて一緒で 目に見えるだけにするのでopacity1にする */ input[type=checkbox]:checked + .label_css:before{ opacity: 1; } |
前提条件として知っておきたいのはbefore,afterの疑似要素の使い方(通常のhtmlパーツを消し,before,afterで生成する)。また上の例ではないですがinput + labelなどと隣接要素を使うときもあるので要注意。※リンク参照
実際のポイントはソースの中に書いてありますが、下記の通り
- まずは通常のcheckboxをクリア
- 通常の要素(labelなど)にposition:relative
- ボックスとチェックマークをafterとbeforeにしposition absoluteで作成
- チェックマークは通常のboxのborderでつくり、傾かせる。ただし通常時は目に見えないのでopacity:0
- checked状態になったときにopacity:1にする
これはcssだけでやってますが、他にも画像を使ったり、font awesomeを使うなど。※リンク参照
