• CSSでラジオボタンをカスタマイズする方法

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

    HTMLの「inputタグ」を使ってラジオボタンを作成する場合、ボタンの種類や色などを指定することはできません。ラジオボタンをカスタマイズする方法として、一旦ボタンの標準スタイルを非表示にしてボタンの装飾をする方法があります。本コラムでは、好みのラジオボタンのスタイルを作成する基本的なCSSの記述方法について解説します。

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

    目次

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

    1. ラジオボタンカスタマイズの準備をする

    1.1. 通常のラジオボタンの作成 [input type="radio"]

    ラジオボタンのカスタマイズはCSSで行いますが、まずはラジオボタンの標準スタイルを確認してみましょう。

    ●ラジオボタン

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

    ※HTMLでラジオボタンを作成する詳しい方法については、「HTML入門:ラジオボタンを作成してみよう【<input type="radio">】」で解説していますのでこちらもご参考下さい。
    「radio1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●radio1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>CSS入門-ラジオボタンのカスタマイズ</title>
    </head>
    <body>
    <h1>ラジオボタンのデザイン</h1>
    <form action="radio.php" method="post">
    <input type="radio" name="fruits" value="1" id="apple">アップル
    <input type="radio" name="fruits" value="2" id="pineapple">パイナップル
    <input type="radio" name="fruits" value="3" id="orange">オレンジ
    </form>
    </body>
    </html>

    HTMLでラジオボタンを作成するには、input タグtype属性「radio」 を指定します。

    <input type="radio">

    name属性にはボタンのグループを特定する名前をつけます。サンプルコードでは、選択肢である「アップル」、「パイナップル」、「オレンジ」のボタン名として、name属性には「fruits」を指定しています。

    <input type="radio" name="fruits">

    value属性には、フォーム(form)を送信した時に、name属性の値とセットでサーバーに送信されるデータになります。

    <input type="radio" name="fruits" value="1">

    id属性は、ラジオボタンに必須の属性ではありませんが、ボタンのカスタマイズの際に利用します。それぞれ「apple」、「pineapple」、「orange」を指定しています。

    <input type="radio" name="fruits" value="1" id="apple">

    選択肢のテキストである「アップル」、「パイナップル」、「オレンジ」をinputタグに引き続き記述します。

    <input type="radio" name="fruits" value="1" id="apple">アップル

    ●ブラウザーの表示

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

    ▲ページトップへ戻る

    1.2. ラジオボタンの標準スタイルを非表示にするCSSを追加する

    ラジオボタンのカスタマイズをするには、ボタンの標準スタイルを一旦非表示にします。「スタイル(style)タグ」にCSSを追加してラジオボタンを装飾します。
    「radio1.html」のヘッダーに以下のCSSを追加して下さい。

    ●radio1.html

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

    inputタグの特定の属性にのみスタイルを適用する、属性セレクタを使用します。

    input[type=radio]

    inputに続き、角括弧([ ])で囲んだtype=radioを指定します。 type属性の値には、「ラジオボタン(radio)」だけでなく「チェックボックス(checkbox)」も指定できます。inputセレクタに、

    display: none;

    を指定する事で、ラジオボタンのスタイルのみを非表示にします。

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

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

    input要素「ラジオボタン」が消えてテキストのみになります。このテキストにCSSを使って、ボタン風の装飾を施していきます。

    ▲ページトップへ戻る

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

    2. ラジオボタンを四角い枠で装飾する

    2.1. ラジオボタンのテキストにラベル(label)を付ける

    ラジオボタンのスタイルを無効にして非表示にしたら、各テキストに対してボタンの代わりの「label」タグを付けます。

    ●radio2.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>CSS入門-ラジオボタンのカスタマイズ</title>
    <style>
    input[type=radio] {
    display: none; /* ラジオボタンを非表示にする */
    }
    </style>
    </head>
    <body>
    <h1>ラジオボタンのデザイン</h1>

    <input type="radio" name="fruits" value="1" id="apple">
    <label for="apple">アップル</label>

    <input type="radio" name="fruits" value="2" id="pineapple">
    <label for="pineapple">パイナップル</label>

    <input type="radio" name="fruits" value="2" id="orange">
    <label for="orange">オレンジ</label>
    </body>
    </html>

    選択肢のテキストをlabelタグで囲みます。「for属性」の値(apple, pineapple, orange)を、inputタグの「id属性」の値と同じにする事でラベルのテキストとラジオボタンを関連づけます。

    <input type="radio" name="fruits" value="1" id="apple">
    <label for="apple">アップル</label>

    選択肢「アップル」に関連づく input タグのid属性の値が「apple」なので、labelタグの「for属性」の値も「apple」にします。その他の「パイナップル」や「オレンジ」も同様に「id属性」と「for属性」の値を同じにします。

    ▲ページトップへ戻る

    2.2. ラジオボタンのテキストラベルに好みのCSSを適用する

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

    ●radio2.html

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

    <input type="radio" name="fruits" value="1" id="apple">
    <label for="apple" class="label">アップル</label>

    <input type="radio" name="fruits" value="2" id="pineapple">
    <label for="pineapple" class="label">パイナップル</label>

    <input type="radio" name="fruits" value="2" id="orange">
    <label for="orange" class="label">オレンジ</label>
    </body>
    </html>

    「.labelクラスセレクタ」では、「borderプロパティ」でラベルの周りにボーダー(枠線)をつけ、「marginプロパティ」でテキストの間に余白をつけます。

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

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

    ▲ページトップへ戻る

    2.3. ラジオボタンのテキストラベルを角丸ボタン風に装飾する

    ラベルに枠線を付けただけでは少し寂しいのでもう少しラベルを装飾してみましょう。 「display: block;」をCSSに追加すると、インライン要素をブロックレベルとして扱う事ができますので、ボーダーの高さや横幅を調整して見栄えよくします。

    ●radio2.html

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

    「widthプロパティ」「heightプロパティ」「paddingプロパティ」などでボックスの縦横幅やラベル内側の余白を調整し、「colorプロパティ」「text-alignプロパティ」「line-heightプロパティ」でテキスト部分の装飾を指定しています。また、ブロックのボーダーは「border-radiusプロパティ」で角丸にしました。

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

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

    ▲ページトップへ戻る

    2.4. checked疑似クラスでラジオボタンをクリックした時の背景を指定する

    ラベルを装飾しただけでは、ラジオボタンとしての機能を視覚的に表すことができません。
    checked疑似クラス」を使って、ラジオボタンをクリックした時に背景の色が変わるようにCSSを追加します。

    ●radio2.html

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

    ラジオボタンをチェックした時にCSSに変更を加えるCSSの書式は以下の通りです。

    input[type="radio"]:checked + label

    inputセレクタに「checked疑似クラス」をつけます。更に「+ label」でinputタグに隣接する「labelタグ」のスタイルを指定する事ができます。「」は「隣接セレクタ」になります。 ラジオボタンをクリックすると、クリックしたinputタグに隣接する「labelタグ」の背景色(background: #31A9EE;)とテキストの色(color: #ffffff;)が変わります。

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

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

    ▲ページトップへ戻る

    2.5. ラジオボタンをマウスオーバーした時の背景を指定する

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

    ●radio2.html

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

    「labelタグ」をマウスオーバー時のスタイルを指定するCSSの書式は以下の通りです。

    .label:hover

    「:hover疑似クラス 」で、マウスオーバー時のボタンの背景色に、薄い水色(background-color: #E2EDF9;)を指定しています。

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

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

    「パイナップル」ボタンをクリックした状態で「オレンジ」ボタンをマウスオーバーした状態です。

    ▲ページトップへ戻る

    3. ラジオボタンの「ボタン」をデザインする

    3.1. 「標準ボタン」のスタイルを変更する

    ラジオボタンの標準ボタンではなく、違ったスタイルのラジオボタンも作成してみましょう。

    先ほど作成した四角いラジオボタンと同様に、標準ラジオボタンのスタイルを非表示にしてラジオボタンのスタイルを適用していきます。
    「radio3.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●radio3.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>CSS入門-ラジオボタンのカスタマイズ</title>
    <style>
    input[type=radio] {
    display: none; /* 標準スタイルを非表示にする */
    }
    .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: 16px; /* ボックスの横幅を指定する */
    height: 16px; /* ボックスの高さを指定する */
    border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
    border-radius: 50%; /* ボックスの角丸を指定する */
    }
    </style>
    </head>
    <body>
    <h1>チェックボックスのデザイン</h1>
    <input type="radio" name="fruits" value="appple" id="appple" />
    <label for="appple" class="sample_label">アップル</label>
    <input type="radio" name="fruits" value="pineapple" id="pineapple" />
    <label for="pineapple" class="sample_label">パイナップル</label>
    <input type="radio" name="fruits" value="orange" id="orange" />
    <label for="orange" class="sample_label">オレンジ</label>
    </body>
    </html>

    CSSで、「display: none;」を指定してラジオボタンのスタイルを非表示にします。HTMLのコードでは、ラジオボタンのテキストに「labelタグ」を付けて、for属性の値と対応する「inputタグ」のid属性の値を同じにします。

    .sample_label」セレクタでボタンの形を作っていきます。
    ボックスの配置(position)と余白(padding)を指定し、「:after」疑似クラスを使ってラジオボタンの枠となるボックスの境界線(border)形(border-radius)、大きさなどを調整して円を作成しています。

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

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

    この段階ではチェックマークを作成していませんので、ボタンをクリックしてもチェックはされません。次にチェックマークを作成するCSSを加えてゆきましょう。

    ▲ページトップへ戻る

    3.2. 疑似クラスを使ってチェックマークを装飾する

    ラジオボタンの項目をチェックした時にチェックマークがつくように「radio3.html」に変更・修正を加えます。

    「.sample_labelセレクタ」に「:before」疑似クラスを追加してチェックマークを作成します。「:before」疑似クラスでは「:after」疑似クラスで作成した円よりも少し小さめの丸いボタンを作成します。
    また、共通のプロパティを「.sample_label:after, .sample_label:before」にまとめました。

    ●radio4.html

    ・・・省略・・・
    <title>CSS入門-ラジオボタンのカスタマイズ</title>
    <style>
    input[type=radio] {
    display: none; /* 標準スタイル */
    }
    .sample_label {
    position: relative; /* ボックスの位置を指定する */
    padding: 0 0 0 42px; /* ボックス内側の余白を指定する */
    }
    .sample_label:after, .sample_label:before {
    position: absolute; /* ボックスの位置を指定する */
    content: ""; /* ボックスのコンテンツ */
    display: block; /* ブロックレベル要素化する */
    top: 50%; /* 上部から配置の基準位置を決める */
    }
    .sample_label:after {
    left: 15px; /* 左から配置の基準位置を決める */
    margin-top: -10px; /* チェック枠の位置 */
    width: 16px; /* ボックスの横幅を指定する */
    height: 16px; /* ボックスの高さを指定する */
    border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
    border-radius: 50%; /* ボックスの角丸を指定する */
    }
    .sample_label:before {
    left: 20px; /* 左から配置の基準位置を決める */
    margin-top: -5px; /* チェックマークの位置 */
    width: 10px; /* ボックスの横幅を指定する */
    height: 10px; /* ボックスの高さを指定する */
    background: #0171bd;/* ボックスの背景色を指定する */
    border-radius: 50%; /* ボックスの角丸を指定する */
    opacity: 0; /* 要素を透過指定する */
    }
    input[type=radio]:checked + .sample_label:before {
    opacity: 1; /* 要素を表示する */
    }
    .sample_label:hover:after {
    border-color: #0171bd; /* ボックスの境界線を実線で指定する */
    }
    </style>
    </head>
    ・・・省略・・・

    .sample_label:after」でグレーの丸を作成し、「.sample_label:before」でラジオボタンをチェックした時の青い丸を作成しています。 ボタンをチェックをしていない状態で、小さい青丸は非表示(opacity: 0;)の状態です。
    ラジオボタンのいずれかをクリックした時に、inputセレクタ

    input[type=radio]:checked + .sample_label:before

    に指定した「opacity: 1;」が有効になり、非表示となっていたチェックマークの青丸が表示されます。

    またマウスオーバー(:hover)した時のスタイルは、「.sample_label:hover:after」で指定しています。

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

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

    ▲ページトップへ戻る

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

    フリーランス案件特集

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

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

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

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

    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価60万円〜100万円
    勤務地 東京都 新宿区
    月額単価70万円〜80万円
    勤務地 フルリモート

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

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

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

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

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

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

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【Java】フルスタックエンジニア★バーコード決済アプリの開発

    大手企業の受託開発をメインに展開している企業にて、Javaエンジニアを募集いたします。 大手小売業顧...

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

    フリーランス

    【Java】システムエンジニア★CMS製品を利用した社内ポータルサイト構築

    大手企業の受託開発をメインに展開している企業にて、Java エンジニアを募集いたします。 Azure AD に...

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

    フリーランス

    【PHP】サーバーサイドエンジニア★エンタメサイトの開発

    同社はアニメや配信動画、ゲーム等、CGをメインとした映像制作を得意とし、これまで培ったノウハウを活...

    月額単価:60万円〜100万円

    フリーランス

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

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

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

SCROLL TOP