通常、チェックボックス・ラジオボタンといえば、
もちろんこのようなものでも悪くないのですが・・・
こんな感じのものはどうですか
・・・つまり、このような形にしたり、チェックに色を付けたり、そのチェックの枠の色を変えたりすることができます（グレーながらも僅かに青がかるようにしています。）
Internet Explorer 9以上など、ある程度新しいブラウザーで使うことができます。(IE8未満は非対応なので、メディアクエリーとセレクタで抑制しています)
やり方
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
input[type=radio], input[type=checkbox] { display: inline-block; margin-right: 6px; } input[type=radio] + label, input[type=checkbox] + label { position: relative; display: inline-block; margin-right: 12px; line-height: 1.5px; cursor: pointer; } @media (min-width: 1px) { input[type=radio], input[type=checkbox] { display: none; margin: 0; } input[type=radio] + label, input[type=checkbox] + label { padding: 0 0 0 24px; } input[type=radio] + label::before, input[type=checkbox] + label::before { content: ""; position: absolute; top: 50%; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background-color: white; } input[type=radio] + label::before { border: 2px solid #c2ced2; border-radius: 30px; } input[type=checkbox] + label::before { border: 2px solid #c2ced2; } input[type=radio]:checked + label::after, input[type=checkbox]:checked + label::after { content: ""; position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } input[type=radio]:checked + label::after { left: 5px; width: 8px; height: 8px; margin-top: -4px; background: #19c5ff; border-radius: 8px; } input[type=checkbox]:checked + label::after { left: 3px; width: 16px; height: 8px; margin-top: -8px; border-left: 3px solid #12b4eb; border-bottom: 3px solid #12b4eb; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<!-- チェックボックス --> <input type="checkbox" name="sample1" id="test1" /> <label for="test1">checkbox</label> <!-- ラジオボタン --> <input type="checkbox" name="sample2" name="aaa" id="test2" /> <label for="test2">radio1</label> <input type="checkbox" name="sample2" name="bbb" id="test3" /> <label for="test3">radio2</label> |
このテクニックの注意ポイント
<label for="●●"> の使い方！
labelタグを使う人は、labelタグの中にinputタグを包み込んで、文字をクリック(スマホだったらタップ)しても反応するようにする…という使い方をしていると思います。
しかし、今回のは
- input に固有のIDを付けて、label for〜 でリンク付ける
- 元々の input 要素は非表示にし、
- 代わりに CSS3 でまったく別の形で描画する
という方法を採っています。
秋田マーケットサービス有限会社はWEBデザイン、プログラマーを募集中です。
弊社では、様々なWebアプリケーションを開発しています
宿泊施設・予約システム（ホームページひな形付き）
弊社では宿泊施設・予約システムをはじめ、様々なWebアプリケーションを開発しています。
サーバーサイドの機能が満載なのはもちろんのことですが、HTML5・CSS（今回ご紹介したような内容も含みます）・jQueryなどといったフロントエンド部分も、パソコンに不慣れな方でも直感的に操作できるようにしています。
また、予約システムだけではなくホームページテンプレートも付属しています。このホームページ１つでだけで宿泊予約が出来ますし(外注システム不要)、システムでプラン情報や価格などを設定すると、即座にホームページにも反映されるようになっています。
また、タブレットやスマートフォンなどといったマルチデバイスにも対応しております。
