CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

純粋なCSSだけでチェックボックスとラジオボタンをカスタマイズする方法を解説

フォームを作成するとき、ユーザーの設定情報の収集、利用規約への同意確認、アンケート回答などに、チェックボックスやラジオボタンを使う場面は多くあります。これらのHTML入力要素にはブラウザごとのデフォルトの外観がありますが、CSSを使えば好みのデザインに自由にカスタマイズできます。この記事では、フォームやWebページでそのまま使える、チェックボックスとラジオボタンのカスタマイズ方法をサンプルコード付きで解説します。

HTMLの基本構造

スタイリングの対象となるHTMLの骨格は、チェックボックスとラジオボタンでほぼ共通です。

1つのチェックボックス／ラジオボタンのコンテナとして、HTMLのlabel要素を使用します。labelの中に、適切なtype属性を持つinput要素と、選択状態を視覚的に示す役割を担うspan要素を配置します。

<html>
<head>
 
  <style>
	/* ここにはまだCSSを書きません */
  </style>
 
</head>
 <body>
   <h2>Radio Button and Checkbox CSS Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked="checked">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 </body>
</html>

上記マークアップの前半はラジオボタンのグループです。ラジオボタンは、複数の選択肢の中から必ず1つだけを選ばせたい場合に使用します。

後半はチェックボックスのグループです。チェックボックスは、ユーザーが複数の項目を任意の数だけ選択できるようにしたい場合に使います。また、「同意する／しない」「はい／いいえ」のような二者択一の場面でもよく利用されます。

これらのHTML要素にはデフォルトの外観がありますが、CSSでスタイルを調整すれば、思い通りの見た目にカスタマイズできます。

CSSの設定

ラジオボタンやチェックボックスのスタイルを変更するには、作業を以下の手順に分解して進めると取り組みやすくなります。

  1. label要素をカスタマイズする
    1. displayプロパティの指定
    2. position: relativeの指定
    3. cursor: pointerの指定
    4. 見た目を整えるためのmarginとpadding
  2. デフォルトのチェックボックスを非表示にする
    1. displayプロパティの指定
  3. カスタムチェックボックス用のコンテナを作成する
    1. height（高さ）
    2. width（幅）
    3. background（背景色）
    4. position: absolute
    5. top・leftの値を設定
  4. ホバー時の演出を追加する（例：チェックボックスの背景色を変える）
  5. チェックされたときに背景色を変更する
  6. 未チェックの状態ではチェックマークや円を非表示にする
  7. チェックされたときにチェックマークや円を表示する
  8. チェックマークのスタイルを整える
  9. 円（ラジオボタン）のスタイルを整える

下のコードを見る前に、まずは骨格HTMLと上記の手順をもとに、自分の力で実装してみることをおすすめします。実際に手を動かすことで理解がぐっと深まります。

なお、テック業界へのキャリアチェンジを検討している方には、ブートキャンプという選択肢もあります。参加者の81%が「受講後、テック系のキャリア展望により自信が持てるようになった」と回答しており、卒業生の平均では、受講開始から初めての仕事に就くまでの期間は6ヶ月未満でした。

完成版コード

<html>
<head>
 
 <style>
  /* label（入力要素）をカスタマイズ */
label {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
/* ブラウザのデフォルトチェックボックスを非表示にする */
label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
 
/* カスタムチェックボックス用のコンテナを作成 */
.checkmark, .link {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
}
 
/* ラジオボタン用に角丸を追加 */
.circle {
 border-radius: 50%;
}
 
/* マウスオーバー時に背景色を変更 */
label:hover input ~ .checkmark {
 background-color: #ccc;
}
 
/* チェックされたら青い背景を追加 */
label input:checked ~ .checkmark {
 background-color: #2196F3;
}
 
/* チェックマーク／円を作成（未チェック時は非表示） */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
 
/* チェックされたらチェックマークを表示 */
label input:checked ~ .checkmark:after {
 display: block;
}
 
/* チェックマークのスタイル */
label .checkmark:after {
 left: 10px;
 top: 3px;
 width: 5px;
 height: 15px;
 border: solid white;
 border-width: 0 3px 3px 0;
 /* 必要に応じてCSSのベンダープレフィックスを使うか必ず確認すること */
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
 
/* ラジオボタンの円のスタイル */
label .circle:after {
 width: 15px;
 height: 15px;
 /* .circleと.checkmarkは技術的には同じ要素なので、border: none を指定しないと不要なチェックマークが画面に表示されてしまう */
 border: none;
 background: white;
 border-radius: 50%;
 left: 20%;
 top: 20%;
}
 
 </style>
 
</head>
 <body>
   <h2>CSS Radio Button and Checkbox Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked>
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example" checked>
     <span class="checkmark"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
   <label class="input">Six
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
 </body>
</html>

以上が、CSSによるラジオボタンとチェックボックスのカスタマイズ例です。最初は少し複雑に感じるかもしれませんが、一度仕組みをつかめば応用範囲は大きく広がります。このCSS演習をクリアできたなら、より高度なトピックへ進む準備は万端です！

  1. CSSとJavaScriptで作る名言スライドショー！前へ・次へボタン付きの実装方法を解説

    CSSとJavaScriptを組み合わせると、名言や引用文を順番に切り替えて表示できるスライドショーを手軽に作成できます。本記事では、「前へ」「次へ」ボタンとドット型ナビゲーションを備えた名言スライドショーの具体的な実装例を、コード付きでわかりやすく解説します。 実装例：完全なサンプルコード 以下のコードをそのままHTMLファイルとして保存すれば、ブラウザですぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=dev

  2. CSS appearanceプロパティで作るカスタムラジオボタンの実装方法

    CSSのappearanceプロパティを使用すると、ユーザーのOS（オペレーティングシステム）が標準で備えるプラットフォームネイティブなスタイルに基づいて要素をスタイリングできます。このプロパティを「none」に設定すれば、ブラウザ既定の外観を無効化でき、ラジオボタンやチェックボックスなど、通常はスタイル変更が難しいフォーム部品も自由にデザインできるようになります。 appearanceプロパティの構文 CSSのappearanceプロパティの基本構文は以下のとおりです。 Selector { appearance: /*値*/; -webkit-appearance: /*値