デザインサンプルで学ぶCSSによるスタイリング～「フォーム（ラジオボタン・チェックボックス・セレクトフォーム）」編

CSSで作るWeb用パーツ（6）

チェックボックスのスタイリング

　続いてチェックボックスのスタイリングをしてみましょう。図9のように、チェックボックスのデフォルトスタイルもブラウザによって異なります。

図9　チェックボックスのデフォルトスタイル（checkbox.html）

チェックボックスをCSSで生成

　先ほどのラジオボタンと同じように、図10のようなチェックボックスをCSSで生成してみましょう。

図10　CSSで生成したチェックボックス（checkbox.html）

　HTMLは次のようになっています。

リスト10　CSSで生成したチェックボックス／HTML（checkbox.html）

<form>
  <p id="checkbox1">
    <input type="checkbox" name="checkbox1" id="c4" checked="checked"><label for="c4">りんご</label>
    <input type="checkbox" name="checkbox1" id="c5"><label for="c5">みかん</label>
    <input type="checkbox" name="checkbox1" id="c6"><label for="c6">バナナ</label>
  </p>
</form>

　今回も「opacity: 0;」で元々のチェックボックスを透明にし、「position: relative;」でラベルを絶対配置の基準位置とします。

リスト11　チェックボックスを透明にし、ラベルを絶対配置の基準位置に／CSS（checkbox.html）

#checkbox1 input {
  opacity: 0;
}
#checkbox1 label {
  position: relative; /*絶対配置の基準位置 */
  ～中略～
}

　次に、:before擬似要素でチェックボックスを作りましょう。「content:"";」を指定して空の内容を追加し、widthやheightプロパティを指定して正方形にします。これに「border-radius:2px;」を指定すると角丸になります。さらに、「position:absolute;」を指定して、topやleftプロパティで絶対配置します。

リスト12　チェックボックスを生成／CSS（checkbox.html）

#checkbox1 label:before {
  display: inline-block;
  content: "";
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 1em;
  height: 1em;
  margin-right: 5px;
  position: absolute;
  top: 0;
  left: 0;
}

　:checked擬似クラスと:after擬似要素でチェック時のラベルの後にチェックマークを生成し、絶対配置します。ここでは、contentプロパティの値にUnicodeのチェックマーク（HEAVY CHECK MARK）「¥2714」を指定していますが、ここにチェックマークの画像を指定しても良いでしょう。

リスト13　チェック時のチェックマーク／CSS（checkbox.html）

#checkbox1 input[type="checkbox"]:checked + label:after {
  content: "\2714";
  font-weight: bold;
  color: red;
  position: absolute;
  top: 0;
  left: 0;
}

　最後にフォーカス時のスタイルを指定して完成です。

リスト14　フォーカス時のスタイル／CSS（checkbox.html）

input[type="checkbox"]:focus + label:before {
  box-shadow: 0 0 1px 2px orange;
}

チェックボックスを背景画像で表示

　図11のように、チェックボックスを背景画像で表示することもできます。この場合は画像を用意する手間がありますが、コードはとてもシンプルになります。

図11　チェックボックスを背景画像で表示（checkbox.html）

　HTMLはp要素のid名が異なるだけで先のサンプルと同じです。まずは、例のごとく、元々のチェックボックスを「opacity:0;」で透明にします。次にラベルにチェックボックスの画像を背景画像として、左側に一度だけ配置し、padding-leftプロパティで背景画像とテキストの間の余白を調整します。

リスト15　ラベルにチェックボックスの画像を背景画像として指定／CSS（checkbox.html）

#checkbox2 input {
  opacity:0;
}
#checkbox2 label {
  display: inline-block;
  padding-left: 25px;
  background: url("check_off.png") no-repeat left center;
}

　チェック時は、背景画像を差し替えるだけです。

リスト16　チェック時の背景画像を指定／CSS（checkbox.html）

#checkbox2 input[type=checkbox]:checked + label {
  background: url("check_on.png") no-repeat left center;
}