PR

【超簡単】たった2行のCSSでチェックボックス/ラジオボタンをカスタマイズする

HTML/CSSを学ぶ

2023.05.26

こんにちは。今回はチェックボックスやラジオボタンの簡易的なカスタマイズについてです。

ボタン全体の形状やマークの形を変えるには擬似要素を使っていじる必要があり、複雑になりがちです（詳しくは後述）。

しかし、色とサイズだけなら簡単に変更することができます。その方法を紹介します。

2023/8/10追記

チェックボックス/ラジオボタンをカスタマイズしなければならない状況がそもそも間違っているのでは？という記事を書きました。もし心当たりがあればデザイナーさんとディスカッションしてみてください。

目次

デモ
解説
もっと本格的にカスタマイズする
まとめ

デモ

accent-colorプロパティで色を、transform: scale() でサイズを変更します。

See the Pen Untitled by 世界一初心者に優しいプログラミング💻小林秀樹 (@hideki_climax) on CodePen.

プロジェクト全体で変更したい場合はinputタグの各typeにスタイルを当てても構いません。

input[type="checkbox"],
input[type="radio"] {
  accent-color: #f00;
  transform: scale(1.5);
}

解説

解説、といっても本当に2行CSSを追加するだけです。

.Customized-Item-Radio,
.Customized-Item-Checkbox {
  accent-color: #f00;
  transform: scale(1.5);
}

/* プロジェクト、あるいはページ全体の場合 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #f00;
  transform: scale(1.5);
}

accent-colorは最近使えるようになった新しいプロパティで、以下の4要素に影響します。

<input type=”radio”>
<input type=”checkbox”>
<input type=”range”>
<progress>

詳しくはこちら。

accent-color - CSS: カスケーディングスタイルシート | MDN

accent-color は CSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。

サイズはtransform: scale(); を使って拡大する形です。カッコの中に数値を入れるとその倍率で拡大されます。

widthやheightを指定しても良いですが、その場合は位置調整などが追加で必要になることが多いです（以下デモ）。

See the Pen demo2 by 世界一初心者に優しいプログラミング💻小林秀樹 (@hideki_climax) on CodePen.

使っているリセットCSSによってはtransform: scale()を使っていても微調整が必要になる場合はありますので適宜調整して使ってください。

もっと本格的にカスタマイズする

前述の通り、ボタン全体の形状やマークの形を変えるには擬似要素が必要で結構大変な作業です（以下参考画像）。

角丸が無くなっていたり、チェックマークの線の太さが違っている例。この場合は実装が複雑。 — 参考画像

こういう場合のやり方を解説した記事がありますのでそちらもあわせてご覧ください。

まとめ

というわけでラジオボタン/チェックボックスをなるべく簡単にカスタマイズする方法でした。デザインがシンプルならこの方法で簡単に実装できる可能性があるのでぜひ覚えておきましょう。

細かいテクニックについてもっと学んでレベルアップしたい方はぜひこちらの本をご覧ください！

【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks

フリーランスのフロントエンドエンジニアとして7年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました！正直言うと、これができているかどうかが「プロかプロでないか」...

コメント

タイトルとURLをコピーしました