### [チェックボックスフィールドのスタイルをカスタマイズする方法](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/)
**公開日:** 2024年2月9日
**著者:** エディトリアルチーム
**抜粋:** この記事では、WPFormsブロックエディターを使用するか、カスタムCSSを使用してチェックボックスフィールドの色をカスタマイズする方法を説明します。
**コンテンツ:**
**チェックボックス**フィールドの色をカスタマイズしたいですか？デフォルトでは、このフィールドは標準のWebスタイルを使用してフォームに表示されます。この記事では、CSSの力でこれをどれだけ簡単にできるかをご案内します！
ただし、**WPFormsブロックエディター**を使用している場合は、カスタムCSSを必要とせずにこれらのスタイルを簡単に調整できます。詳細については、[こちらの便利なガイドをご覧ください](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "WPFormsをブロックエディターを使用してスタイル設定する方法")。**フィールドスタイル**と**ボタンのスタイル**を変更すると、この記事のカスタムCSSでできることとまったく同じことをブロックエディターで実現できます。
ブロックエディターの**ボタンのスタイル**は、**送信**ボタンと**チェックボックス**フィールドだけでなく、**複数選択**フィールドの色も変更します。
この記事では、これらの変更を行うためにカスタムCSSの魔法を使いながら進めていきます。
## フォームの作成
まず、フォームを作成し、必要なフィールドを追加します。これには、少なくとも1つの**チェックボックス**フィールドが含まれます。
フォームの作成についてサポートが必要な場合は、[こちらの便利なガイドを簡単に確認できます](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")。
**チェックボックス**フィールドを追加したら、**高度な設定**タブをクリックし、**CSSクラス**に `special-checkbox-buttons` を追加します。これをカスタムCSSを呼び出すためのトリガーとして使用します。
## チェックボックスフィールドのスタイルのカスタマイズ
フォームを保存したら、CSSを追加できます。カスタムCSSをサイトに追加する場所や方法がわからない場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")。
```
.special-checkbox-buttons input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
background-color: #fff !important;
margin: 0 !important;
font: inherit !important;
color: #e27730 !important;
width: 1.15em !important;
height: 1.15em !important;
border: 0.15em solid #e27730 !important;
border-radius: 0.15em !important;
transform: translateY(-0.075em) !important;
display: grid !important;
place-content: center !important;
}
.special-checkbox-buttons input[type="checkbox"]::before {
content: "" !important;
width: 0.65em !important;
height: 0.65em !important;
transform: scale(0) !important;
transition: 120ms transform ease-in-out !important;
box-shadow: inset 1em 1em #e27730 !important;
transform-origin: bottom left !important;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
.special-checkbox-buttons input[type="checkbox"]:checked::before {
transform: scale(1) !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
}
.special-checkbox-buttons input[type=checkbox]:checked:after {
content: none !important;
}
```
このCSSは、境界線と選択の色を`#e27730`に変更しますが、選択が行われるときに小さなアニメーションも追加します。
ブロックエディターのスタイルを使用する場合でも、カスタムCSSを使用する場合でも、**チェックボックス**フィールドの色を簡単にカスタマイズできます。**複数選択**フィールドでも同様の機能をお探しですか？[複数選択フィールドのスタイルをカスタマイズする方法](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "複数選択フィールドのスタイルをカスタマイズする方法")に関する記事をご覧ください。
**カテゴリ:** スタイリング
**タグ:** CSS
---