レベルF株式会社

チェックボックスをcssをいじっておしゃれにする方法
レベルF株式会社のブログとなります。
業務についてから社員のつぶやきまで日々更新してまいります。
HOME >レベルFのブログ > cssテクニック・jQuery > チェックボックスをcssをいじっておしゃれにする方法

チェックボックスをcssをいじっておしゃれにする方法

input属性へのスタイルはデザインだけではなくコンバージョン率に直結します。
今回はチェックボックス(checkbox)に対してcssのみでデザインをつける方法のご紹介です。

チェックボックスをおしゃれに変更

よくウェブサイト上のお問い合わせフォームなどで「プライバシーポリシーに同意する」や、「メールマガジンの配信に同意する」のような項目でチェックを要求されることありますね。

あのチェックボタン、標準のままの場合少しやぼったい。
さらに言えばブラウザ(ieやfirefox、chrome)によりデザインも異なります。

そんなチェックボックスにひと手間かけてすこしおしゃれにする方法です。

チェックボックスの横のテキスト部分をクリックしてもチェックをつける

まずはここから。

パターン1

 犬が好き
 猫が好き

パターン2

 
 

パターン1と2に違いがあるのがわかりますでしょうか。

パターン2のほうはテキスト部分をクリックしてもチェックされますね。

チェックボックスをcssのみでカスタマイズ

ユーザーの使いやすさを考慮するのであればこちらのほうを推奨します。

パターン1のHTML記述

パターン2のHTML記述

パターン2のinputの中のidとlabelの中のforはそれぞれinputとlabelのチェックを対応させるものですので、同じワードを記述してあげてください。

いざチェックボックスをcssのみでカスタマイズ

まずは完成版



HTML記述

css記述

1行目の
input[type=checkbox] {
display: none;
}

でもともとのブラウザ固有のチェックボックスを隠しております。
このまま使うとサイト内すべてのチェックボックスが隠れてしまいますので、サイト内でも部分的に利用したい場合はcheckbox自体に属性などをつけて使用して下さい。

.check_css:before内にある
border-right: 3px solid #0171bd;
border-bottom: 3px solid #0171bd;
でチェックマークの色の変更も可能です。

少し補足説明ですが、これは2辺のみ直角にボーダーをつけて、後ろのrotate(45deg)により45度回転させてチェックマークの形に見せております。

ただそのためIe8以前のブラウザでは表示が崩れます。
徐々になくなってきているとは思いますが、「Ie8にも対応させたい」のような要望の時には利用しないほうが良いでしょう。

chromeやsafariなどでは問題なしですね。

なお、今回は「checkbox」に対してデザインをつけておりますが、同じようにラジオボタンにも対応可能です。
一気に気を使っているデザインになった気がしませんでしょうか。

まとめ

少しの工夫でデザインの見栄えはだいぶ変わります。
それと同時に、input属性へのスタイルはデザインだけではなくコンバージョン率に直結します。

「チェックしやすい」「テキスト入力しやすい」「送信ボタンを押しやすい」

当たり前のことですが少し見落としがちな部分です。

今回はチェックボックスに対してのデザインのご紹介でしたが、このinput属性へのアプローチというのは頭に入れておいたほうが良いでしょう。


Pick Up

Blog Category

Newest Blog

Blog Ranking

まだデータがありません。

お客様の期待値以上の成果物をお届けいたします。

レベルF株式会社は、ホームページ制作・運営コンサルティング会社を中心業務とし
都内、新宿・渋谷・池袋を中心に多くの企業様のお手伝いをしております。
ホームページのみにこだわらず名刺やパンフレットなどそれぞれ理想のお付き合いをさせていただくべく、
幅広いご提案をさせていただき、貢献させていただいております。
どんな些細な事でもお気軽にお問い合わせくださいませ。