CSSでチェックボックスとラジオボタンのデザインを変更する方法

チェックボックスとラジオボタンは、1つ前の記事のファイル入力 (input[type=”file”]要素) と同様に、ブラウザ毎にデザインが決まっていて、CSSでデザインすることができない要素です。

今回は、このチェックボックスとラジオボタンのデザインをCSSで変更する方法をご紹介します。コピペで使用できるHTMLコードとCSSコードを併記しています。

チェックボックスとラジオボタンのHTMLコード

<form>
  <p><input type="checkbox" id="checkbox" class="check" /><label for="checkbox">Checkbox</label></p>
  <p><input type="radio" id="radio" class="check" /><label for="radio">Radio</label></p>
  <p><input type="reset" /></p>
</form>

class属性に「check」という値があること以外は、これといって特別なことはしていない、シンプルなチェックボックスとラジオボタンのHTMLコードです。

フォーム (form要素) とリセットボタン (input[type=”reset”]要素) は、チェックボックスとラジオボタンのデザインに必要という訳ではありません。

冒頭でもお伝えしたとおり、チェックボックスとラジオボタンはCSSでデザインすることができません。そこで、隣接したラベル (label要素) にスタイルを適用していきます。

チェックボックスとラジオボタンのCSSコード

今回のチェックボックスとラジオボタンのデザインは、HTMLコード、CSSコード、デザインの全てがシンプルであることを重視しました。そのため、チェックボックスとラジオボタンのほとんどの部分が共通設定となっています。

チェックボックスとラジオボタンの共通設定

.check{
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  position:fixed;
  top:0;
}
.check+label{
  display:inline-block;
}
.check+label:before{
  border:solid;
  box-sizing:border-box;
  content:"";
  display:inline-block;
  margin:0 0.166666em;
  opacity:0.25;
  position:relative;
  right:-0.166666em;
  left:-0.166666em;
  vertical-align:middle;
  width:1em;
  height:1em;
}
.check:enabled+label{
  cursor:pointer;
}
.check:enabled+label:hover:before,
.check:enabled:focus+label:before{
  opacity:0.5;
}
.check:checked+label:before{
  opacity:0.75;
}
.check:checked:enabled+label:hover:before,
.check:checked:enabled:focus+label:before{
  opacity:1;
}
.check:disabled+label{
  opacity:0.5;
}

共通設定の要点をまとめると次のようになります。

• チェックボックスとラジオボタンを非表示にする。
• ラベルに空のbefore疑似要素を生成して、ボーダー幅を含めた正方形にする。
• hover (ポインタが要素上にある状態)、focus (要素にフォーカスが当たった状態)、disabled (要素が無効の状態) の各状態に合わせて、ラベルや疑似要素の不透明度を設定する。

ちなみに、疑似要素とその後に続く文字列との間に、半角スペース1つ分 (およそ1/3文字分) の余白が入るよう次のような設定しています。

.check+label:before{
  …
  margin:0 0.166666em;
  …
  position:relative;
  right:-0.166666em;
  left:-0.166666em;
  …
}

これは、書字方向が左から右の場合には右側に、右から左の場合には左側に、余白の位置を自動的に調整するための設定です。書字方向が常に左から右なら margin-right のみ、右から左なら margin-left のみ、設定するだけでも構いません。

チェックボックス設定

.check[type="checkbox"]+label:before{
  border-width:0 0.25em 0.125em 0;
  transform:translate(0,-0.125em) rotate(45deg) scale(0.5,1);
}

チェックボックス設定の要点をまとめると次のようになります。

• 疑似要素の右側にボーダーを設定する。
• 疑似要素の下側にボーダーを設定する。
• 疑似要素の水平方向のみを縮小して右側と下側の異なるボーダー幅を同じ幅にする。
• 疑似要素を 45° 回転する。
• 疑似要素の位置を微調整する。

これでボックス (□) のないチェックマーク (✓) のみのデザインになります。

ラジオボタン設定

.check[type="radio"]+label:before{
  border-width:0.125em;
  border-radius:50%;
}

ラジオボタン設定の要点をまとめると次のようになります。

• 疑似要素の上下左右に同じ幅のボーダーを設定する。
• 疑似要素を丸める。

これで円 (○) ができ、背景色と同じ色のチェックが入ったようなデザインになります。

「CodePen」による実際の表示

カスタマイズするためのヒント

今回はボーダーのみでチェックボックスとラジオボタンを作りましたが、ボーダーではなく、チェックボックスとラジオボタンの画像を背景画像に設定することで、より多彩なデザインが可能となります。

ただし、背景画像を使用する際には印刷時の対応が必要です。印刷設定で、背景色と背景画像は印刷されない場合があるためです。

もっとも簡単な対応方法は @media screen を使用して、印刷時でない場合にのみCSSで装飾したチェックボックスとラジオボタンを適用するか、@media print を使用して、祖先要素のフォームごと非表示にする方法が考えられます。

ちなみに、ボーダーはきちんと印刷されるので、印刷時の対応は必要ありません。

〆

いかがだったでしょうか？フォームコントロール要素はCSSで装飾不可能なものが多いですが、アイデアと工夫次第で自由自在にデザインすることができます。

フォームはアクセスしてくれたユーザーとコミュニケーションをとるための重要な構成要素です。フォームのデザインを最適化して、より円滑なコミュニケーションがとれるよう工夫してみてください。