📂プログラミング

CSSでチェックボックスのボックスのみを隠す方法

ショーケース

R G B

最近では検索やフィルタリング設定などでチェックボックスの枠を表示せず、背景だけを変えてON/OFFを示すケースが増えている。上のR、G、Bはそのような方法で実装されたチェックボックスだ。

コード

HTML

<input type="checkbox" id="box_R" hidden checked>
<label for="box_R" class="option">R</label>
<input type="checkbox" id="box_G" hidden checked>
<label for="box_G" class="option">G</label>
<input type="checkbox" id="box_B" hidden>
<label for="box_B" class="option">B</label>

• hidden: チェックボックスの枠を隠す。単に枠だけをなくすとクリックできる場所がなくなるため、labelを使ってクリック領域を作る。
• checked: チェックボックスがデフォルトで選択された状態で始まる。この属性を削除すると、チェックボックスは未選択の状態で開始する。

CSS

以下は簡単にテストできるように HTML コードそのままに書かれたCSSだ。実際には別のCSSファイルに記述する方がよい。

<style>
  .option {
    padding: 0 .4em 0 .4em;
    border: 2px solid transparent;
    border-radius: 5px;
  }
    input#box_R:checked + label {background-color: #aa0000; color: #ffffff;}
    input#box_G:checked + label {background-color: #00aa00; color: #ffffff;}
    input#box_B:checked + label {background-color: #0000aa; color: #ffffff;}
</style>

• .option: 単にボックスを見た目よく整えるためのスタイルだ。
• intput#box_*:checked + label: ボックスがチェックされたときにラベルのスタイルを変えるという意味だ。チェックボックスがチェックされると、その直後に来るlabelの背景色と文字色を変える。