• CSSだけでチェックボックスをカスタマイズする方法

    公開日:2017年01月11日 最終更新日:2022年09月20日

     

    HTMLの input タグ を使ってチェックボックスを作成する場合、チェックボックスの形や色などをCSSで指定することはできません。チェックボックスをカスタマイズする方法として、一旦チェックボックスの標準スタイルを無効にして好みのチェックボックスを作成する方法があります。本コラムでは、チェックボックスのスタイルを適用する基本的なCSSの記述方法について解説します。

    プロエンジニアの無料会員登録はこちら

    目次

    その他プロエンジニアでは、常時8000案件保有。
    あなたに合う案件をプロが探し、案件参画から、稼働中のお悩みまで全サポート致します。
    まずは気軽にご連絡ください。

    プロエンジニアの無料会員登録はこちら

    1. チェックボックスのスタイルを無効にする

    1.1. 通常のチェックボックス[ input type="checkbox" ]の作成

    まずは、標準スタイルのチェックボックスを作成してみましょう。「checkbox1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ※HTMLでチェックボックスを作成する方法については、「HTML入門:チェックボックスを表示させてみよう」で解説していますのでご参考下さい。

    ●checkbox1.html

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-チェックボックスのカスタマイズ</title> </head> <body> <h1>チェックボックスのデザイン</h1> <input type="checkbox" name="fruits" value="1" id="appple">りんご <input type="checkbox" name="fruits" value="2" id="pineapple">ぶどう <input type="checkbox" name="fruits" value="3" id="orange">みかん </body> </html>

    HTMLでチェックボックスを作成するには、input タグtype属性「checkbox」 を指定します。 name属性にはボタンのグループを特定する名前をつけます。サンプルコードの「checkbox1.html」では、チェックボックスの選択肢に「りんご」、「ぶどう」、「みかん」の3つを作成しています。チェックボックスのグループ名として、name属性に「fruits」を指定しました。

    value属性には、フォーム(form)を送信した時に、name属性の値と一緒にサーバーに送信される値になります。サンプルコードでは、「りんご」に"1"、「ぶどう」に"2"、「みかん」に"3"を指定しています。

    id属性は、チェックボックスのカスタマイズの際に利用します。それぞれ「apple」、「pineapple」、「orange」としました。

    選択肢のテキストである「りんご」、「ぶどう」、「みかん」をinputタグに引き続き記述します。

    ●ブラウザーの表示(標準のチェックボックス)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    1.2. チェックボックスの標準スタイルを無効にする[ display: none ]

    CSSで標準スタイルを非表示(無効)にする事で、チェックボックスのカスタマイズをします。 「displayプロパティ」に "none" を指定して、チェックボックスを無効にします。「checkbox1.html」のヘッダーに以下のCSSを追加して下さい。

    ●checkbox1.html

    ・・・省略・・・ <title>CSS入門-チェックボックスのカスタマイズ</title> <style> input[type=checkbox] { display: none; /* checkboxを非表示にする */ } </style> </head> ・・・省略・・・

    inputタグの特定の属性にのみスタイルを適用する、属性セレクタ[type=checkbox]を使用します。type属性の値には、「チェックボックス(checkbox)」だけでなく「ラジオボタン(radio)」なども指定できますので、type=checkboxを角括弧([ ])で囲むと、HTML文書中の中で、inputタグの type属性の値が"checkbox"のタグ、つまりチェックボックスのCSSスタイルを指定するセレクタになります。

    inputの属性セレクタdisplay: none;を指定する事で、チェックボックスのスタイルを無効にします。

    ●ブラウザーの表示(checkbox1.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    input要素「チェックボックス」がなくなり、「りんご」、「ぶどう」、「みかん」のテキストのみが表示された状態になります。このHTMLに好みのスタイルを適用します。

    ▲ページトップへ戻る

    プロエンジニアの無料会員登録はこちら

    2. チェックボックスのlabel要素を装飾する

    2.1. チェックボックスにラベル(label)を付ける

    チェックボックスを非表示にしたので「labelタグ」を使う事でチェックボックス用のラベルを作成します。

    ●checkbox2.html

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-チェックボックスのカスタマイズ</title> <style> </style> </head> <body> <h1>チェックボックスのデザイン</h1>

    <input type="checkbox" name="fruits" value="1" id="apple"> <label for="apple" class="label">りんご</label> <input type="checkbox" name="fruits" value="2" id="pineapple"> <label for="pineapple" class="label">ぶどう</label> <input type="checkbox" name="fruits" value="3" id="orange"> <label for="orange" class="label">みかん</label> </body> </html>

    選択肢のテキスト「りんご」、「ぶどう」「みかん」をlabelタグで囲みます。for属性の値を input タグの id 属性の値と同じにする事でラベルのテキストとチェックボックスを紐づけています。

    <input type="checkbox" name="fruits" value="1" id="apple"> <label for="apple" class="label">りんご</label>

    「りんご」の選択肢を見てみましょう。項目名「りんご」に input タグを紐づけるには、id 属性の値を「apple」にした場合、labelタグのfor属性の値もappleにします。その他の「ぶどう」や「みかん」も同様にid属性とfor属性の値を同じにします。

    ▲ページトップへ戻る

    2.2. チェックボックスのテキストラベル(label)に最低限のCSSを適用する

    「属性セレクタ[type=radio]」でチェックボックスのスタイルを非表示にして、テキストにラベル(label)タグをつけました、次は、CSSを適用していきましょう。 チェックボックスを好みのスタイルにするには、テキストラベルを「.labelクラスセレクタ」で装飾し、ボックスをチェックした時の動作や背景色を「:checked疑似クラス」、「隣接セレクタ」を使ってスタイル指定します。 まずは必要最低限の装飾として、テキストラベルのタグに枠線をつけてみましょう。

    ●checkbox2.html

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-チェックボックスのカスタマイズ</title> <style> input[type=checkbox] { display: none; /* チェックボックスを非表示にする */ } .label { margin: 5px; /* ラベル外側の余白を指定する */ border: 2px solid #006DD9;/* ラベルの境界線を実線で指定する */ } </style> </head> <body> <h1>チェックボックスのデザイン</h1>

    <input type="checkbox" name="#" value="1" id="apple"> <label for="apple" class="label">りんご</label> <input type="checkbox" name="#" value="2" id="pineapple"> <label for="pineapple" class="label">ぶどう</label> <input type="checkbox" name="#" value="3" id="orange"> <label for="orange" class="label">みかん</label> </body> </html>

    「borderプロパティ」「marginプロパティ」「.labelクラスセレクタ」に指定します。テキストラベルの「りんご」、「ぶどう」、「みかん」周りにはボーダー(枠線)が表示されます。また、テキストの間にマージンを指定しました。

    ●ブラウザーの表示(checkbox2.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.3. チェックボックスのテキストラベル(label)に好みのCSSを適用する

    ラベルに枠線を付けたので、このラベルにスタイルを加えてもう少し装飾します。 ラベルの枠線に高さ背景などを指定したいので、インライン要素をブロックレベルとして扱うことのできる「display: block;」をラベル(.label)に追加します。枠線の高さや横幅を変更して見栄えよくしてみましょう。

    ●checkbox2.html

    <style> input[type=radio] { display: none; /* チェックボックスを非表示にする */ } .label { display: block; /* ブロックレベル要素化する */ float: left; /* 要素の左寄せ・回り込を指定する */ margin: 5px; /* ラベル外側の余白を指定する */ width: 100px; /* ラベルの横幅を指定する */ height: 45px; /* ラベルの高さを指定する */ text-align: center; /* テキストのセンタリングを指定する */ line-height: 45px; /* 行の高さを指定する */ padding-left: 5px; /* ラベル内左側の余白を指定する */ padding-right: 5px; /* ラベル内右側の余白を指定する */ cursor: pointer; /* マウスカーソルの形(リンクカーソル)を指定する */ color: #b20000; /* フォントの色を指定 */ border: 2px solid #006DD9;/* ラベルの境界線を実線で指定する */ border-radius: 5px; /* 角丸を指定する */ } </style>

    ラベルにつけた枠線の横幅と高さを、「widthプロパティ」「heightプロパティ」で指定し、「paddingプロパティ」で内側の余白、「border-radiusプロパティ」で角丸を作っています。 また、テキストの色をつける「colorプロパティ」や、「text-alignプロパティ」「line-heightプロパティ」でテキスト部分の装飾を指定しています。

    ●ブラウザーの表示(checkbox2.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.4. checked疑似クラスでチェックボックスをクリックした時の背景を指定する

    ラベルを装飾したら、次はチェックボックスをチェック(クリック)した時のスタイルを追加します。 「 checked疑似クラス」は、、チェックボックスをチェックした時のスタイルを指定します。

    ●checkbox2.html

    <style> input[type=radio] { display: none; /* チェックボックスを非表示にする */ } input[type="checkbox"]:checked + label { background: #31A9EE;/* マウス選択時の背景色を指定する */ color: #ffffff; /* マウス選択時のフォント色を指定する */ } .label {

    ・・・省略・・・ } </style>

    [input[type="checkbox"]:checked + label]を追加すると、チェックボックスをクリックした時に、枠線の内側の背景色及びテキストの色が変わります。

    ●ブラウザーの表示(checkbox2.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    2.5. チェックボックスをマウスオーバーした時の背景を指定する

    疑似クラス「:hover 」「.labelクラスセレクタ」に追加し、マウスオーバーした時にチェックボックスの背景色を変えてみましょう。

    ●checkbox2.html

    <style> input[type=radio] { display: none; /* チェックボックスを非表示にする */ } input[type="checkbox"]:checked + label { background: #31A9EE;/* マウス選択時の背景色を指定する */ color: #ffffff; /* マウス選択時のフォント色を指定する */ } .label:hover { background-color: #E2EDF9; /* マウスオーバー時の背景色を指定する */ } .label {

    ・・・省略・・・ } </style>

    ●ブラウザーの表示(checkbox2.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    「:hover疑似クラス 」で、チェックボックスをマウスオーバーした時の色を、薄い水色で指定しています。「ぶどう」がチェックされている状態で「みかん」をマウスオーバーした状態です。

    項目名を「labelタグ」で囲み"for属性"「inputタグ」"id属性"でラジオボタンの項目とラベルを紐づけていますので選択した項目の値はラジオボタンのスタイルを無効にしても、正しくサーバーに送信されます。

    ▲ページトップへ戻る

    3. 疑似クラスを使ってチェックボックスの枠をデザインする

    まずは、標準のチェックボックスのスタイルを無効にしてチェックボックスの枠のみを変更してみましょう。スタイルの無効には「display: none;」を指定します。

    ●checkbox1.html

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-チェックボックスのカスタマイズ</title> <style> input[type=checkbox] { display: none; /* checkboxを非表示にする */ } .sample_label { position: relative; /* ボックスの位置を指定する */ padding: 0 0 0 42px; /* ボックス内側の余白を指定する */ } .sample_label:after { position: absolute; /* ボックスの位置を指定する */ content: ""; /* ボックスのコンテンツ */ display: block; /* ブロックレベル要素化する */ top: 50%; /* 上部から配置の基準位置を決める */ left: 15px; /* 左から配置の基準位置を決める */ margin-top: -10px; /* チェック枠の位置 */ width: 15px; /* ボックスの横幅を指定する */ height: 15px; /* ボックスの高さを指定する */ border: 2px solid #aaaaaa; /* ボックスの境界線を実線で指定する */ border-radius: 6px; /* ボックスの角丸を指定する */ } </style> </head> <body> <h1>チェックボックスのデザイン</h1> <input type="checkbox" name="#" value="appple" id="appple" /> <label for="appple" class="sample_label">りんご</label> <input type="checkbox" name="#" value="pineapple" id="pineapple" /> <label for="pineapple" class="sample_label">ぶどう</label> <input type="checkbox" name="#" value="orange" id="orange" /> <label for="orange" class="sample_label">みかん</label> </body> </html>

    「.sample_label」セレクタではボックスの配置(position)余白(padding)を指定し、「:after」疑似クラスを使ってチェックボックスの枠となるボックスの境界線(border)や形(border-radius)、大きさなどを指定しています。この段階ではチェックマークを作成していませんので、ボックスをクリックしてもチェックはされません。次にチェックマークを作成するCSSを加えてゆきましょう。

    ●ブラウザーの表示(checkbox3.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    4. 疑似クラスを使ってチェックマークをデザインする

    項目をチェックした時にチェックマークがつくように「checkbox1.html」に「:before」疑似クラスを追加します。共通のプロパティは「.sample_label:after, .sample_label:before」にまとめました。「:before」疑似クラスではボックスの右側と下部に境界線を表示して要素を回転させることでチェックマークのようなボックスを作成しています。

    ●checkbox1.html

    ・・・省略・・・ <title>CSS入門-チェックボックスのカスタマイズ</title> <style> input[type=checkbox] { display: none; /* checkboxを非表示にする */ } .sample_label { position: relative; /* ボックスの位置を指定する */ padding: 0 0 0 42px; /* ボックス内側の余白を指定する */ } .sample_label:hover:after { border-color: #0171bd; /* ボックスの境界線を実線で指定する */ } .sample_label:after, .sample_label:before{ position: absolute; /* ボックスの位置を指定する */ content: ""; /* ボックスのコンテンツ */ display: block; /* ブロックレベル要素化する */ top: 50%; /* 上部から配置の基準位置を決める */ } .sample_label:after { left: 15px; /* 左から配置の基準位置を決める */ margin-top: -10px; /* チェック枠の位置 */ width: 15px; /* ボックスの横幅を指定する */ height: 15px; /* ボックスの高さを指定する */ border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */ border-radius: 6px; /* ボックスの角丸を指定する */ } .sample_label:before { left: 21px; /* 左から配置の基準位置を決める */ margin-top: -7px; /* チェックマークの位置 */ width: 5px; /* ボックスの横幅を指定する */ height: 9px; /* ボックスの高さを指定する */ border-right: 3px solid #0171bd; /* 境界線(右)のスタイルを指定する */ border-bottom: 3px solid #0171bd; /* 境界線(下)のスタイルを指定する */ transform: rotate(45deg); /* 要素を回転させる */ opacity: 0; /* 要素を透過指定する */ } input[type=checkbox]:checked + .sample_label:before { opacity: 1; /* 要素を表示する */ } </style> </head> ・・・省略・・・

    項目をクリックした時の動作は、「属性セレクタ[type=checkbox]」「:checked疑似クラス」、「隣接セレクタ」を使い、クリックした時にチェックマークが表示されるように「opacity」プロパティに"1"を設定しています。 またマウスオーバー(:hover)した時のスタイルも追加しています。

    ●ブラウザーの表示(checkbox4.html)

    CSSだけでチェックボックスをカスタマイズする方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ▲ページトップへ戻る

    HTML入門:チェックボックスを表示させてみよう
    「アンケート」や「お問い合わせ」フォームよく見られるチェックボックスを作成してみましょう。選択肢の中から複数選べるコントロールです。<form>タグの部品として、<input type="checkbox">を追加す…
    HTML入門:ラジオボタンを作成してみよう! <input type="radio">
    ラジオボタンは複数の選択肢の中から、1つの項目のみ選択する事ができる部品です。HTML文書の中では、質問の答えとして、1つだけ回答させる場合などに使われます。よく似た部品のチェックボックスは複数の選択肢の中からいくつでも選択する事ができます…
    CSSでラジオボタンをカスタマイズする方法
    HTMLの「inputタグ」を使ってラジオボタンを作成する場合、ボタンの種類や色などを指定することはできません。ラジオボタンをカスタマイズする方法として、一旦ボタンの標準スタイルを非表示にしてボタンの装飾をする方法があります。本コラムでは、…
     

    フリーランス案件特集

    当サイトプロエンジニアのコンサルタントが厳選したおすすめのフリーランス案件特集はこちら 特集ページから案件への応募も可能です!

    フリーランスインタビュー

    実際にフリーランスエンジニアとして活躍されている方のインタビューはこちら

    最新の求人情報をチェック!

    月額単価70万円〜80万円
    勤務地 フルリモート
    勤務地 東京都 品川区
    月額単価70万円〜80万円
    勤務地 東京都 中央区

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【React】フロントエンドエンジニア★転職・採用支援サービスの開発

    自社サービスとして転職・採用支援サービスを展開している企業にて、フロントエンドエンジニアとしてご...

    月額単価:70万円〜80万円

    フリーランス

    【Python/AWS/HTML/CSS】ITスクールの講師

    ITスクールを運営している企業にて、スクールの講師としてご参加頂きます。 テキストや動画教材を使用...

    フリーランス

    【JavaScript/React(Next.js)】フロントエンドエンジニア★クラウド型動画コンテンツ配信システムの開発

    国内導入実績No.1の実績を持つクラウド型動画コンテンツ配信システムを行っている企業にて、フロントエ...

    月額単価:80万円〜90万円

    フリーランス

    【TypeScript/Vue】フロントエンドエンジニア★写真販売システムの開発

    クラウドソーシング事業やBPO事業を展開している企業にて、今回は写真販売システムのフロントエンドエン...

    月額単価:70万円〜80万円

SCROLL TOP