### [Authorize.netプレースホルダーのカスタマイズ方法](https://wpforms.com/developers/how-to-customize-the-authorize-net-placeholder/)
**公開日:** 2021年7月7日
**著者:** エディトリアルチーム
**抜粋:** このチュートリアルでは、CSSを使用してAuthorize.netのプレースホルダーをスタイルする方法を説明します。
**コンテンツ:**
## はじめに
**クレジットカード番号**フィールドに表示されるAuthorize.netのプレースホルダーをカスタマイズしたいですか？ CSSを使用すると、番号フィールドだけでなく、**セキュリティコード**フィールドも簡単にスタイルできます。このチュートリアルでは、これらの2つのフィールドをスタイルするために必要なCSSを紹介します。
デフォルトでは、クレジットカードを入力するフィールドには、いくつかのデフォルトのスタイルが適用されています。
## フォームの作成
まず、簡単な寄付フォームを作成し、Authorize.net クレジットカードフィールドを追加します。このタイプのフォームの作成方法についてサポートが必要な場合は、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "WPFormsでAuthorize.Netアドオンをインストールして使用する方法")。
Authorize.netフォームフィールドを追加したら、**フィールドオプション**に移動し、**高度な設定**タブをクリックします。そこから、**プレースホルダー**テキストを追加できます。
## CSSの追加
次に、サイトにCSSを追加します。
サイトにCSSを追加する方法についてサポートが必要な場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")。
```
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* Firefox 19+ */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* IE 10+ */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* Firefox 18- */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
```
CSSクラス名 **input.wpforms-field-authorize\_net-cardnumber** は **カード番号**フィールドのみをスタイル設定し、**input.wpforms-field-authorize\_net-cardcvc** クラス名は **セキュリティコード**フィールドのみをスタイル設定します。
上記のCSSは、すべてのフォームのAuthorize.netのすべてのカード番号フィールドとセキュリティコードフィールドをスタイル設定します。
これで、Authorize.netのプレースホルダーフィールドをカスタマイズするために必要なすべてが揃いました。請求書番号も送信したいですか？ [Authorize.net支払いへの請求書番号の送信方法](https://wpforms.com/developers/how-to-send-an-invoice-number-through-to-authorize-net-payments/ "Authorize.Net支払いへの請求書番号の送信方法")に関するこの記事をご覧ください。
**カテゴリー:** チュートリアル
**タグ:** CSS
---