PR

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

HTML/CSSを学ぶ

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

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

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

デモ

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

プロジェクト全体で変更したい場合は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を指定しても良いですが、その場合は位置調整などが追加で必要になることが多いです(以下デモ)。

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

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

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

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

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

まとめ

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

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

【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks
フリーランスのフロントエンドエンジニアとして7年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました!正直言うと、これができているかどうかが「プロかプロでないか」...
この記事を書いた人
小林 秀樹

Web制作フリーランス9年目|ディレクター・フロントエンドエンジニア
「世界一初心者に優しい」→セカヤサ。

コーポレートサイトやLP、メディア立ち上げまで幅広く対応。コーディングを軸に、UX設計・SEOライティング・サイト運用まで一貫対応。

法律系オウンドメディア立ち上げ支援では、特定のキーワードでのSEO1位を実現し問い合わせ獲得に貢献。また大手専門学校サイトの大規模リニューアル(100ページ超)でのディレクションと実装の両面の経験あり。

最近では、AIツールによる自社サービスUI制作や、ChatGPTを活用した記事執筆フローの構築など、AI時代に対応した制作手法の実践にも注力している。

zenn:
https://zenn.dev/hideki_climax

制作実績:
https://tan-band-c66.notion.site/37abe7077b184b338fd8f53f6873ca1d

小林 秀樹をフォローする
HTML/CSSを学ぶ
スポンサーリンク
シェアする
小林 秀樹をフォローする

コメント

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