CSSでアプリ風チェックボックスをデザイン【サンプルコード有】

チェックボックスをスマホアプリなどでよく使われている、スイッチのようなUIにデザインするcssをご紹介します。

チェックボックスのcssデザインそのものの解説については、cssでチェックボックスデザインの解説記事をご確認ください。

CSSでチェックボックスをオリジナルデザイン化
チェックボックスのデザインをcssで自由に装飾する方法についてまとめました。四角ボックスやチェックの色を変更したり、サイトに合わせてカスタマイズ可能なサンプルをご紹介しています。

iOS風チェックボックスデザイン

iPhoneやiPadなどのiOS機種で使用されているチェックボックスデザインです。

CSSソースコード

/* 本来のチェックボックスを非表示 */
.app_checkbox input[type="checkbox"]{
    display: none;
}
.app_checkbox input[type="checkbox"]+label{
    cursor: pointer;
    display: inline-block;
    box-sizing: content-box;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #FFF;
    border: 2px solid #CCC;
    border-radius: 30px;
}
.app_checkbox input[type="checkbox"]:checked+label{
    background-color: #78D376;
    border-color: #78D376;
}
.app_checkbox input[type="checkbox"]+label:before{
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 30px; /* widthと同じ 上のラベルの高さに揃える */
    left: 0;
    top: 0;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 2px 2px 4px gray;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.app_checkbox input[type="checkbox"]:checked+label:before{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    box-shadow: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

チェックが入ると、中の丸を右に移動し、背景を緑色に変更します。

移動はtransitionを使用したアニメーションで移動させています。

デモ

cssを反映させ、HTMLで表示させたデモはこちらです。

実際にクリックなどして動作を確認してみてください。

サンプルコード
<div class="app_checkbox">
    <input id="sample1" value="1" type="checkbox"><label for="sample1"></label>
</div>

Android風チェックボックスデザイン

Androidの設定UIなどで使用されているチェックボックスデザインも再現してみました。

CSSソースコード

ほぼiOS版と同じですが、Android版は丸のスイッチが大きくなっているので、微調整してあります。

/* 本来のチェックボックスを非表示 */
.app2_checkbox input[type="checkbox"]{
    display: none;
}
.app2_checkbox input[type="checkbox"]+label{
    cursor: pointer;
    display: inline-block;
    box-sizing: content-box;
    position: relative;
    width: 40px;
    height: 10px;
    background-color: #FFF;
    border: 2px solid #CCC;
    border-radius: 10px;
}
.app2_checkbox input[type="checkbox"]:checked+label{
    background-color: #0078db;
    border-color: #0078db;
}
.app2_checkbox input[type="checkbox"]+label:before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px; /* widthと同じ 上のラベルの高さに揃える */
    left: 0;
    top: -5px;
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%);
    border-radius: 50%;
    background-color: #FFF;
    border: 2px solid #CCC;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.app2_checkbox input[type="checkbox"]:checked+label:before{
    left: auto;
    right: auto;
    -webkit-transform: translateX(110%);
    transform: translateX(110%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-color: #0078db;
}

デモ

Android風UIデモです。

サンプルコード
<div class="app2_checkbox">
    <input id="sample2" value="1" type="checkbox"><label for="sample2"></label>
</div>

スマホアプリのように使うツール系のサービスの場合は、こちらのチェックボックスのほうが馴染みがあって良いかもしれません。

スマホユーザーには直感的に伝わる切り替えのチェックボックスだと思うので、是非活用してみてください。

以上、CSSでアプリ風チェックボックスをデザイン、でした。

コメント

タイトルとURLをコピーしました