【CSS】スタイルのみで checkbox(チェックボックス)画像でデザインする方法。 スタイルのみでデザイン
CSS3は、色々と特殊なデザインができるようになりました。
そこで、今回は、チェックボックスをオリジナルの画像にする方法です。
【デモ】
【HTML】
【CSS】
まず、「input」をCSSの「display:none」で隠します。
そして、「:after」で疑似的に画像でチェックボックスを作成し :checked を使用することで「チェックした時」という疑似クラスを使用しています。
また、「+」で隣接するクラスを指定します。 この疑似クラスで、labelの色と:afterの画像を変更しています。
cssのみで作成していますので、サイトも重くならず、かなり使い勝手がいいので、是非活用してください。
ただ、CSS3で作成していますのでIE8以下や古いブラウザには対応していない可能性が高いので注意が必要です。
そこで、今回は、チェックボックスをオリジナルの画像にする方法です。
【デモ】
【HTML】
<ul id="checbox"> <li> <input type="checkbox" name="" value="" id="1"> <label for="1">データ1</label> </li> <li> <input type="checkbox" name="" value="" id="2"> <label for="2">データ2</label> </li> <li> <input type="checkbox" name="" value="" id="3"> <label for="3">データ3</label> </li> </ul>
【CSS】
#checbox { width:200px; border:1px solid #c0c0c0; } #checbox li { position:relative; border-bottom:1px solid #c0c0c0; } #checbox li:last-child { border-bottom:none; } #checbox li input[type="checkbox"] { display:none; } #checbox li label { display: block; padding: 10px 10px 10px 40px; cursor:pointer; } #checbox li label:after { content: ""; width: 30px; height: 30px; background-size: 30px; background-image: url(http://www.poroanet.com/img/blog/c_off.gif); background-repeat: no-repeat; position: absolute; top: 50%; margin: -18px 0 0 0; left: 5px; } #checbox li input[type="checkbox"]:checked + label { background-color:#060; color:#fff; } #checbox li input[type="checkbox"]:checked + label:after { background-image:url(http://www.poroanet.com/img/blog/c_on.gif); }
まず、「input」をCSSの「display:none」で隠します。
そして、「:after」で疑似的に画像でチェックボックスを作成し :checked を使用することで「チェックした時」という疑似クラスを使用しています。
また、「+」で隣接するクラスを指定します。 この疑似クラスで、labelの色と:afterの画像を変更しています。
cssのみで作成していますので、サイトも重くならず、かなり使い勝手がいいので、是非活用してください。
ただ、CSS3で作成していますのでIE8以下や古いブラウザには対応していない可能性が高いので注意が必要です。
著者:poroa | 投稿日:2016年09月24日 | カテゴリ:CSS