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

2019年11月10日

チェックボックスをスマホアプリなどでよく使われている、スイッチのようなUIにデザインする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アニメーションの使い方をサンプルで解説

デモ

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でアプリ風チェックボックスをデザイン、でした。