[CSS] チェックボックスをタグリストのように装飾

以前、[CSS] スマホ向けにチェックボックスの装飾では単数のチェックボックスに有効なUI実装をしてみました。複数のチェックボックスに対してはもう少し有効なUIがあるように感じます。例えばタグが一覧表示されクリックないしタップするとグレーアウト/ハイライトされるようなUIです。今回はそのタグリストのような装飾にカスタマイズしてみたいと思います。

HTMLは複数のチェックボックスを形成する<input>と<label>、そしてそれらを囲む<div>になります。

<div class="tags">
    <input type="checkbox" name="langs[]" value="ja" id="ja">
    <label for="ja">Japanese</label>
    <input type="checkbox" name="langs[]" value="en" id="en">
    <label for="en">English</label>
    <input type="checkbox" name="langs[]" value="ch" id="ch">
    <label for="ch">Chinese</label>
    <input type="checkbox" name="langs[]" value="sp" id="sp">
    <label for="sp">Spanish</label>
    <input type="checkbox" name="langs[]" value="fr" id="fr">
    <label for="fr">French</label>
</div>

装飾用のCSSが以下になります。定義の考え方は前回と同様で<label>と対になる<input>は非表示にしておき、<label>に見た目のスタイルを定義します。あとは擬似クラス「:checked」が付与された<label>に対してはスタイルの色を変更しグレーアウト/ハイライトを実現しています。

.tags label {
    display: inline-block;
    height: 30px;
    line-height: 26px;
    color: #999;
    letter-spacing: normal;
    box-sizing: border-box;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid #ccc;
    border-radius: 30px;
    cursor: pointer;
}
.tags label:last-of-type {
    margin-right: 0;
}
.tags input[type="checkbox"] {
    display: none;
}
.tags input[type="checkbox"]:checked + label {
    color: #1DA1F2;
    border-color: #1DA1F2;
}

  実際のデモはこちら

今回もCSSのみでチェックボックスをいい感じにカスタマイズできました。

  • 2018.08.01
  • お仕事っぽいこと