### [チェックボックスとラジオボタンをボタンのようにカスタマイズする方法](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/)

**公開日:** 2020年10月30日
**著者:** Umair Majeed

**概要:** この記事では、CSSを使用してチェックボックスやラジオボタンをボタンのように見せる方法をご紹介します。

**内容:**

**チェックボックス**や**ラジオボタン**をボタンのようにカスタマイズしたいとお考えですか？ [CSS](https://www.wpbeginner.com/glossary/css/ "What is: CSS") を使用すれば、これらの入力フィールドの表示を簡単に変更し、特定のブランドイメージに合わせた色のボタンにすることができます。さらに、ユーザーが各選択肢にカーソルを合わせたり、選択されているすべての項目にカーソルを合わせたりした際に、ボタンがページから浮き上がるような効果も実現できます。このチュートリアルでは、その実現方法について各ステップを順を追って解説します。

デフォルトでは、**チェックボックス**のフォームフィールドは、チェックするラベルの前にボックスが表示されます。**ラジオボタン**のフォームフィールドも、同じデフォルトのスタイルが適用されています。

![チェックボックスやラジオボタンのフィールドには、スタイル設定用の独自のデフォルトCSSが用意されています](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-default-styling.jpg)しかし、CSSの力を借りれば、これらのフィールドを単なるチェックボックスではなく、ボタンのように見せるように簡単にスタイル設定できます。このチュートリアルでは、このスタイル変更に必要なCSSをご紹介します。

## フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。このフォームには、**チェックボックス**フィールドと**複数選択**フィールドをそれぞれ1つずつ含めます。

各フィールドを追加する際、**詳細**タブをクリックし、**選択肢のレイアウト**ドロップダウンから**インライン**を選択してください。

![フィールドを追加し、[詳細設定]タブからチェックボックスと複数選択フィールドの[選択肢のレイアウト]を[インライン]に設定してください](https://wpforms.com/wp-content/uploads/2020/10/wpforms-choice-layout-inline.jpg)## CSSの追加

それでは、CSSの魔法をかけましょう。以下のCSSをコピーして、サイトに貼り付けるだけです。

サイトへのCSSの追加方法や場所についてサポートが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsにカスタムCSSスタイルを追加する方法")をご確認ください。

#### 特定のフォームに対するチェックボックスおよび複数選択フィールド

`form#wpforms-form-1000` を、ご自身のフォームIDに合わせて変更することをお忘れなく。特定のフォームIDの確認方法については、[こちらのチュートリアル](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)をご参照ください。

#### すべてのフォームのチェックボックスおよび複数選択フィールド

あるいは、このCSSを使用することで、すべてのフォームの**チェックボックス**および**複数選択**フィールドを一括で変更することも可能です。

![CSSを使用すると、チェックボックスやラジオボタンをボタンのようにカスタマイズできます](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-buttons-css.jpg)CSS内の色指定は、使用したい色に合わせて変更することを忘れないでください。

これで**チェックボックス**と**ラジオボタン**フィールドのカスタマイズは完了です。**数値**フィールドもカスタマイズしてみませんか？ [数値フィールドの矢印を削除する方法](https://wpforms.com/developers/how-to-remove-the-arrows-on-the-numbers-field/ "数値フィールドの矢印を削除する方法")に関するチュートリアルをご覧ください。

**カテゴリ:** フィールド

**タグ:** CSS

---