# Elements Appearance API Element は、サイトに合わせてデザインをカスタマイズできます Stripe Elements はデザインのカスタマイズに対応しており、`appearance` オプションでサイトのデザインと親和性を持たせることができます。各要素のレイアウトに一貫性をもたせながら、色、フォント、ボーダー、パディングなどを変更することができます。 1. お客様のウェブサイトに最も近い事前構築された [テーマ](https://docs.stripe.com/elements/appearance-api.md#theme) を選択します。 1. [入力とラベル](https://docs.stripe.com/elements/appearance-api.md#inputs-and-labels) を使用してテーマをカスタマイズします。`fontFamily` や `colorPrimary` などの [変数](https://docs.stripe.com/elements/appearance-api.md#variables) を設定して、各 Element 全体に表示されるコンポーネントを幅広くカスタマイズすることもできます。 1. 必要に応じて、[ルール](https://docs.stripe.com/elements/appearance-api.md#rules) を使用して個々のコンポーネントと状態を微調整します。 きめ細かく制御するには、Element に表示される個々のコンポーネントにカスタム CSS プロパティを指定します。 > Elements Appearance API は、個別の支払い方法の Element (`CardElement` など) には対応していません。Element をカスタマイズするには、代わりに [Style (スタイル)](https://docs.stripe.com/js/appendix/style) オブジェクトを使用してください。 # Checkout Sessions API > This is a Checkout Sessions API for when api-integration is checkout. View the full page at https://docs.stripe.com/elements/appearance-api?api-integration=checkout. ## テーマ 以下のいずれかのテーマを選択して決済要素のカスタマイズを開始します: - `stripe` - `night` - `flat` #### HTML + JS ```js const appearance = { theme: 'night' }; // Pass the appearance object when initializing checkout const checkout = stripe.initCheckoutElementsSdk({clientSecret, elementsOptions: {appearance}}); ``` #### React ```jsx import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; const appearance = { theme: 'night' }; // Pass the appearance object to CheckoutElementsProvider ``` ## 入力とラベル 入力フィールドとそれに関連付けられたラベルのデザインをカスタマイズします。 `const appearance = { inputs: 'spaced', labels: 'auto' }` ### 入力 デザインに合わせて入力フィールドのスタイルを選択します。 | バリアント | 説明 | | ----------- | --------------------------------------- | | `spaced` | 各入力フィールドにはスペースが挿入されます。これはデフォルトのオプションです。 | | `condensed` | 関連する入力フィールドは、スペースなしでグループ化されます。 | ### ラベル 入力フィールドに関連付けられたラベルの位置と可視性を制御します。 | バリアント | 説明 | | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | | `auto` | 入力バリアントに基づいてラベルが調整されます。入力が `spaced` をあけると、ラベルが `above` に表示されます。入力が `condensed` されると、ラベルが `floating` 表示されます。これはデフォルトのオプションです。 | | `above` | ラベルは、対応する入力フィールドの上に配置されます。 | | `floating` | ラベルは入力フィールド内に浮かびます。 | ## 変数 各決済要素に表示される多くのコンポーネントの外観に影響を与える変数を設定します。 ![カード入力フィールド、主要なクレジットカードのアイコン、Klarna 決済オプションが表示され、色とスタイルを設定する Appearance API 変数のラベルが付いた決済フォーム。](https://b.stripecdn.com/docs-statics-srv/assets/exampleVariables@2x.8c50d1561d5d4fbb1ac0187983ab33c0.png) `variables` オプションは [CSS 変数](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)と同じように機能します。各変数に CSS 値を指定できるほか、`var(--myVariable)` 構文を使用して他の外観変数を参照することもできます。ブラウザーの開発者ツールを使用して生成された DOM 構造を確認することもできます。 > `colorPrimary`、`colorBackground`、`colorText`、`colorSuccess`、`colorDanger`、そして `colorWarning` の変数は、`rgba()` や `var(--myVariable)` 構文をサポートしません。 #### HTML + JS ```js const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object when initializing checkout const checkout = stripe.initCheckoutElementsSdk({clientSecret, elementsOptions: {appearance}}); ``` #### React ```jsx import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to CheckoutElementsProvider ``` ### 使用頻度の高い変数 | 変数 | 説明 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fontFamily` | UI 全体で使用されるフォントファミリー。Checkout 要素では、`fonts` オプションを [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-fonts) または [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-fonts) に渡すことで、カスタムフォントを使用できます。 | | `fontSizeBase` | UI のルートで設定されるフォントサイズ。デフォルトでは、`fontSizeXs` や `fontSizeSm` などの他のフォントサイズ変数は `rem` 単位を使用してこの値から拡大縮小されます。モバイルの入力フィールドのフォントサイズは 16px 以上を選択してください。 | | `spacingUnit` | 間隔を空ける際はこの基本単位が適用されます。この値を増減してレイアウトの間隔を調整します。 | | `borderRadius` | タブ、入力、その他のコンポーネントに使用される境界半径。 | | `colorPrimary` | UI 全体で使用される主要なカラー。これを、ブランドの主要カラーに設定してください。 | | `colorBackground` | 入力、タブ、その他のコンポーネントの背景に使用されるカラー。 | | `colorText` | 使用されるデフォルトのテキストの色。 | | `colorDanger` | エラーや破壊的なアクションを示すために使用されるカラー。 | ### 使用頻度の低い変数 | 変数 | 説明 | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `buttonBorderRadius` | ボタンに使用される境界の半径。デフォルトでは、ボタンは `borderRadius` を使用します。 | | `buttonColorBackground` | ボタンの背景に使用される色。デフォルトでは、`colorPrimary` が使用されます。 | | `buttonColorText` | ボタンに使用されるテキストの色。デフォルトでは、`accessibleColorOnColorPrimary` が使用されます。 | | `focusBoxShadow` | フォーカスされたコンポーネントに使用される `box-shadow`。 | | `focusOutline` | フォーカスされたコンポーネントに使用される `outline`。 | | `fontSmooth` | 使用するテキストのアンチエイリアス設定。`always`、`auto`、`never` のいずれかになります。 | | `fontVariantLigatures` | テキストの [font-variant-ligatures](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) 設定。 | | `fontVariationSettings` | テキストの [font-variation-settings](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) 設定。 | | `fontWeightLight` | 蛍光文字のフォントの太さ。 | | `fontWeightNormal` | 標準文字のフォントの太さ。 | | `fontWeightMedium` | 中文字のフォントの太さ。 | | `fontWeightBold` | 太字文字のフォントの太さ。 | | `fontLineHeight` | テキストの [line-height](http://developer.mozilla.org/en-US/docs/Web/CSS/line-height) 設定。 | | `fontSize2Xl` | double-extra large テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeXl` | 特大テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeLg` | 大テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeSm` | 小テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeXs` | 極小テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSize2Xs` | 極小より 2 段階小さいテキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSize3Xs` | 極小より 3 段階小さいテキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `logoColor` | 表示されるロゴのバリエーションの設定 (`light` または `dark` のいずれか)。 | | `tabLogoColor` | `.Tab` コンポーネントに表示されるロゴのバリエーション (`light` または `dark` のいずれか)。 | | `tabLogoSelectedColor` | `.Tab--selected` コンポーネントに表示されるロゴのバリエーション (`light` または `dark` のいずれか)。 | | `blockLogoColor` | `.Block` コンポーネントに表示されるロゴのバリエーション (`light` または `dark` のいずれか)。 | | `colorSuccess` | ポジティブなアクションや成功を示すために使用されるカラー。 | | `colorWarning` | 破壊的な可能性があるアクションを示すために使用されるカラー。 | | `accessibleColorOnColorPrimary` | `var(--colorPrimary)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorBackground` | `var(--colorBackground)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorSuccess` | `var(--colorSuccess)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorDanger` | `var(--colorDanger)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorWarning` | `var(--colorWarning)` 背景の前面に表示される文字の色。 | | `colorTextSecondary` | 重要度の高いテキストに使用される色。たとえば、現在選択されていないタブのラベルなどに使用されます。 | | `colorTextPlaceholder` | 入力のプレースホルダーテキストに使用されるカラー。 | | `iconColor` | カードタブに表示されるアイコンなど、アイコンに使用されるデフォルトのカラー。 | | `iconHoverColor` | マウスカーソルを合わせたときのアイコンの色。 | | `iconCardErrorColor` | カードがエラー状態の場合に表示されるカードアイコンの色。 | | `iconCardCvcColor` | カードアイコンのセキュリティコードの色。 | | `iconCardCvcErrorColor` | セキュリティコードフィールドの入力が無効な場合に表示されるカードアイコンのセキュリティコードの色。 | | `iconCheckmarkColor` | `.Checkbox` などのコンポーネントで表示されるチェックマークの色。 | | `iconChevronDownColor` | 入力を選択する時に表示される矢印アイコンの色。 | | `iconChevronDownHoverColor` | マウスカーソルを合わせたときの矢印アイコンの色。 | | `iconCloseColor` | 終了または閉じるの操作が行われたことを示す閉じるアイコンの色。 | | `iconCloseHoverColor` | マウスカーソルを合わせたときの閉じるアイコンの色。 | | `iconLoadingIndicatorColor` | 読み込みインジケーターのスピナーの色。 | | `iconMenuColor` | 追加アクションを示すメニューアイコンの色。 | | `iconMenuHoverColor` | マウスカーソルを合わせたときのメニューアイコンの色。 | | `iconMenuOpenColor` | メニューを開いたときのメニューアイコンの色。 | | `iconPasscodeDeviceColor` | ユーザーのモバイルデバイスにメッセージが送信されたことを示すパスコードデバイスアイコンの色。 | | `iconPasscodeDeviceHoverColor` | マウスカーソルを合わせたときのパスコードデバイスアイコンの色。 | | `iconPasscodeDeviceNotificationColor` | パスコードデバイスアイコンの上に表示される通知インジケーターの色。 | | `iconRedirectColor` | リダイレクトベースの決済手段に表示されるリダイレクトアイコンの色。 | | `tabIconColor` | タブに表示されるアイコンの色。 | | `tabIconHoverColor` | マウスカーソルをタブの上に合わせたときにタブに表示されるアイコンの色。 | | `tabIconSelectedColor` | 選択されているタブに表示されるアイコンの色。 | | `tabIconMoreColor` | 追加の決済手段メニューのトリガーに表示されるアイコンの色。 | | `tabIconMoreHoverColor` | マウスカーソルをトリガーの上に合わせたときに追加の決済手段メニューのトリガーに表示されるアイコンの色。 | | `accordionItemSpacing` | `.AccordionItem` コンポーネント間の縦間隔。これは、[spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) が `true` の場合にのみ適用されます。 | | `gridColumnSpacing` | UI レイアウトに使用される、グリッド内の列間のスペース。 | | `gridRowSpacing` | UI レイアウトに使用される、グリッド内の行間のスペース。 | | `pickerItemSpacing` | `.Picker` コンポーネント内で表示される `.PickerItem` コンポーネント間の間隔。 | | `tabSpacing` | `.Tab` コンポーネント間の横間隔。 | ## ルール `rules` オプションは、CSS に類似するセレクターと CSS プロパティのマッピングであり、個々のコンポーネントをきめ細かくカスタマイズできます。`theme` および `ariables` を定義した後で、`rules` を使用して UI をサイトのデザインに合わせて導入します。 #### HTML + JS ```js const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object when initializing checkout const checkout = stripe.initCheckoutElementsSdk({clientSecret, elementsOptions: {appearance}}); ``` #### React ```jsx import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to CheckoutElementsProvider ``` ### すべてのルール ルールのセレクターは、UI 内の公開クラス名、および各クラスのサポートされる状態、疑似クラス、疑似要素を対象にすることができます。有効なセレクターの例を以下に示します。 - `.Tab, .Label, .Input` - `.Tab:focus` - `.Input--invalid, .Label--invalid` - `.Input::placeholder` 以下は有効なセレクターでは**ありません**。 - `.p-SomePrivateClass, img`: 公開クラス名のみターゲットにすることができます - `.Tab .TabLabel`: セレクター内での先祖子孫関係はサポートされていません - `.Tab--invalid`、`.Tab` クラスは `--invalid` 状態をサポートしません セレクターに表示される各クラス名は、[CSS プロパティの許可リストに対応](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties)しています。これは、キャメルケース ([box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) プロパティの `boxShadow` など) を使用して指定します。 以下は、サポートされているクラス名と、対応するステータス、疑似クラス、疑似要素の一覧です。 ### タブ ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesTabs@2x.9c36db7ee4c98d7b2d6f00e91e6d4f20.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ----------- | ------------ | --------------------------------------- | ---- | | `.Tab` | `--selected` | `:hover`、`:focus`、`:active`、`:disabled` | | | `.TabIcon` | `--selected` | `:hover`、`:focus`、`:active`、`:disabled` | | | `.TabLabel` | `--selected` | `:hover`、`:focus`、`:active`、`:disabled` | | ### 入力 (ラベル) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputs@2x.4ed082ee74fcbad043a80e2d4b133b35.png) モバイルの入力フィールドには、少なくとも 16px のフォントサイズを選択してください。 | クラス名 | ステータス | 疑似クラス | 疑似要素 | | -------- | --------------------------------- | ----------------------------------------- | ----------------------------- | | `.Label` | `--empty`、`--invalid`、`--focused` | | | | `.Input` | `--empty`、`--invalid` | `:hover`、`:focus`、`:disabled`、`:autofill` | `::placeholder`、`::selection` | | `.Error` | | | | ### 入力 (フローティングラベル) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputsFloating@2x.daec4a823ac24cc86d94a44664104eb8.png) > [追加の設定オプション](https://docs.stripe.com/elements/appearance-api.md#others) としてフローティングラベルを有効にできます。 | クラス名 | ステータス | 疑似クラス | 疑似要素 | | -------- | ---------------------------------------------------------- | ----------------------------------------- | ----------------------------- | | `.Label` | `--empty`、`--invalid`、`--focused`、`--floating`、`--resting` | | | | `.Input` | `--empty`、`--invalid` | `:hover`、`:focus`、`:disabled`、`:autofill` | `::placeholder`、`::selection` | | `.Error` | | | | ### ブロック ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesBlock@2x.556532f7e919aaf1d775ceb0253f5c22.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | --------------- | ------------ | --------------------------- | ---- | | `.Block` | | | | | `.BlockDivider` | | | | | `.BlockAction` | `--negative` | `:hover`、`:focus`、`:active` | | ### コード入力 ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCodeInput@2x.64975e4945d393068a2f207a2d48f25c.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------ | ----- | ----------------------------- | ---- | | `.CodeInput` | | `:hover`、`:focus`、`:disabled` | | ### チェックボックス ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCheckbox@2x.d7bedd38a342344eb06d5bff5dd6ae43.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ---------------- | ----------- | ---------------------------------- | ---- | | `.Checkbox` | `--checked` | | | | `.CheckboxLabel` | `--checked` | `:hover`、`:focus`、`:focus-visible` | | | `.CheckboxInput` | `--checked` | `:hover`、`:focus`、`:focus-visible` | | ### ドロップダウン ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesDropdown@2x.d635e032d2a254d672c11825a2d3d23d.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | --------------- | ------------- | --------- | ---- | | `.Dropdown` | | | | | `.DropdownItem` | `--highlight` | `:active` | | > macOS では、ドロップダウンのスタイルが制限されています。ドロップダウンの Appearance API は主に Windows システムに影響します。macOS では、オペレーティングシステムの制限により、システムのドロップダウン (国セレクターなど) のスタイルをこれらのルールを使用して設定することはできません。 ### 切り替え ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesSwitch@2x.a263ba8361af937d5228a35d18c63645.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ---------------- | ---------- | -------- | ---- | | `.Switch` | `--active` | `:hover` | | | `.SwitchControl` | | `:hover` | | ### ピッカー ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesPicker@2x.aa78c665be0c7e33a62992c8e7e33014.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | --------------- | ----------------------------------------------- | --------------------------- | ---- | | `.PickerItem` | `--selected`、`--highlight`、`--new`、`--disabled` | `:hover`、`:focus`、`:active` | | | `.PickerAction` | | `:hover`、`:focus`、`:active` | | 他の状態と比較して `.PickerItem` のアクティブな状態が目立つようにしてください。 | | | | | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDo@2x.cc709dc96a8e99e6b020f53216d4d585.png) | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDont@2x.b31bc4b51910a6eece59d44fa92c5b4d.png) | | **推奨** コントラストの高い原色、太いフォント、アウトラインを用いると、アクティブのステータス (顧客が選択した項目) が判別しやすくなります。 | **非推奨** .PickerItem のステータスを区別する際、同じ太さのフォントオプションやコントラストの低い色を使用しないようにしてください。アクティブの判別が難しくなります。 | ### メニュー | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------- | ------------ | --------------------------- | ---- | | `.Menu` | | | | | `.MenuIcon` | `--open` | `:hover` | | | `.MenuAction` | `--negative` | `:hover`、`:focus`、`:active` | | ### アコーディオン | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ---------------- | ------------ | ------------------------- | ---- | | `.AccordionItem` | `--selected` | `:hover`、`:focus-visible` | | ### Payment Method Messaging Element | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------------------- | ----- | ----- | ---- | | `.PaymentMethodMessaging` | | | | ### ラジオアイコン ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesRadioIcon@2x.25886d6b352ac0a8d003e7e2cd39677d.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ----------------- | ----------------------- | ----- | ---- | | `.RadioIcon` | | | | | `.RadioIconOuter` | `--checked`、`--hovered` | | | | `.RadioIconInner` | `--checked`、`--hovered` | | | `.RadioIcon` の `width` プロパティを使用して、アイコン全体のサイズを制御できます。`r` (半径) プロパティで `.RadioIconInner` の相対サイズを調整します。`.RadioIconOuter` と `.RadioIconInner` は SVG 要素であり、 `stroke` と `fill` プロパティでスタイルを指定できます。[サポートされている CSS プロパティ](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties)については、下記の一覧でご確認ください。 ```js const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } }; ``` ### 切り替え ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesToggleItem@2x.88891aff38f391f7c792a4bfeb8ad026.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------- | ------------ | --------------------------------------- | ---- | | `.ToggleItem` | `--selected` | `:active`、`:hover`、`:focus`、`:disabled` | | ### サポートされている CSS プロパティ | CSS プロパティ | サポートされているクラス | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-moz-osx-font-smoothing` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `-webkit-font-smoothing` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `-webkit-text-fill-color` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `backgroundColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`BlockDivider`、`Button`、`CheckboxInput`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`InputDivider`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`Switch`、`Tab`、`ToggleItem` | | `border` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottom` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomLeftRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomRightRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeft` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeftColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeftStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeftWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `borderRight` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRightColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRightStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRightWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTop` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopLeftRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopRightRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `boxShadow` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`ToggleItem` | | `color` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabIcon`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fill` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RadioIconInner`、`RadioIconOuter`、`SwitchControl`、`Tab`、`TabIcon`、`ToggleItem` | | `fillOpacity` | `RadioIconInner`、`RadioIconOuter` | | `fontFamily` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fontSize` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Switch`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fontVariant` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fontWeight` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `letterSpacing` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `lineHeight` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `margin` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginBottom` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginLeft` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginRight` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginTop` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `opacity` | `Label` | | `outline` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`ToggleItem` | | `outlineOffset` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`ToggleItem` | | `padding` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingBottom` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingLeft` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingRight` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingTop` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `r` | `RadioIconInner` | | `stroke` | `RadioIconInner`、`RadioIconOuter` | | `strokeOpacity` | `RadioIconInner`、`RadioIconOuter` | | `strokeWidth` | `RadioIconInner`、`RadioIconOuter` | | `textAlign` | `PaymentMethodMessaging` | | `textDecoration` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `textShadow` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `textTransform` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `transition` | `Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CheckboxLabel`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Icon`、`Input`、`InputCloseIcon`、`Label`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`RadioIconInner`、`RadioIconOuter`、`RedirectText`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TabIcon`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `width` | `RadioIcon` | 上記のプロパティにはいくつかの例外があります。 - `-webkit-text-fill-color` は疑似クラスと互換性がありません ## その他の設定オプション `themes`、`labels`、`inputs`、`variables`、`rules` に加えて、Elements のスタイルは、その他の外観設定オプションを使用して設定できます。 これらは、Appearance オブジェクトに追加することでカスタマイズ可能です。 ```js const appearance = { disableAnimations: true, // other configurations such as `theme`, `labels`, `inputs`, `variables` and `rules`... } ``` 現在、使用可能なオプションは以下のとおりです。 | 設定 | 説明 | | ------------------- | --------------------------------------------- | | `disableAnimations` | UI 全体でアニメーションを無効にします。ブール値で、デフォルトは `false` です。 | # Payment Intents API > This is a Payment Intents API for when api-integration is paymentintents. View the full page at https://docs.stripe.com/elements/appearance-api?api-integration=paymentintents. ## テーマ 以下のいずれかのテーマを選択して Elements のカスタマイズを開始します: - `stripe` - `night` - `flat` #### HTML + JS ```js const appearance = { theme: 'night' }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance}); ``` #### React ```jsx import {Elements} from '@stripe/react-stripe-js'; const appearance = { theme: 'night' }; // Pass the appearance object to the Elements provider ``` ## 入力とラベル 入力フィールドとそれに関連付けられたラベルのデザインをカスタマイズします。 `const appearance = { inputs: 'spaced', labels: 'auto' }` ### 入力 デザインに合わせて入力フィールドのスタイルを選択します。 | バリアント | 説明 | | ----------- | --------------------------------------- | | `spaced` | 各入力フィールドにはスペースが挿入されます。これはデフォルトのオプションです。 | | `condensed` | 関連する入力フィールドは、スペースなしでグループ化されます。 | ### ラベル 入力フィールドに関連付けられたラベルの位置と可視性を制御します。 | バリアント | 説明 | | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | | `auto` | 入力バリアントに基づいてラベルが調整されます。入力が `spaced` をあけると、ラベルが `above` に表示されます。入力が `condensed` されると、ラベルが `floating` 表示されます。これはデフォルトのオプションです。 | | `above` | ラベルは、対応する入力フィールドの上に配置されます。 | | `floating` | ラベルは入力フィールド内に浮かびます。 | ## 変数 Elements の多くのコンポーネントのデザインに影響を与える変数を設定します。 ![カード入力フィールド、主要なクレジットカードのアイコン、Klarna 決済オプションが表示され、色とスタイルを設定する Appearance API 変数のラベルが付いた決済フォーム。](https://b.stripecdn.com/docs-statics-srv/assets/exampleVariables@2x.8c50d1561d5d4fbb1ac0187983ab33c0.png) `variables` オプションは [CSS 変数](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)と同じように機能します。各変数に CSS 値を指定できるほか、`var(--myVariable)` 構文を使用して他の外観変数を参照することもできます。ブラウザーの開発者ツールを使用して生成された DOM 構造を確認することもできます。 > `colorPrimary`、`colorBackground`、`colorText`、`colorSuccess`、`colorDanger`、そして `colorWarning` の変数は、`rgba()` や `var(--myVariable)` 構文をサポートしません。 #### HTML + JS ```js const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance}); ``` #### React ```jsx import {Elements} from '@stripe/react-stripe-js'; const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to the Elements provider ``` ### 使用頻度の高い変数 | 変数 | 説明 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fontFamily` | UI 全体で使用されるフォントファミリー。Elements では、`fonts` オプションを [Elements group](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-fonts) に渡すことで、カスタムフォントを使用できます。 | | `fontSizeBase` | UI のルートで設定されるフォントサイズ。デフォルトでは、`fontSizeXs` や `fontSizeSm` などの他のフォントサイズ変数は `rem` 単位を使用してこの値から拡大縮小されます。モバイルの入力フィールドのフォントサイズは 16px 以上を選択してください。 | | `spacingUnit` | 間隔を空ける際はこの基本単位が適用されます。この値を増減してレイアウトの間隔を調整します。 | | `borderRadius` | タブ、入力、その他のコンポーネントに使用される境界半径。 | | `colorPrimary` | UI 全体で使用される主要なカラー。これを、ブランドの主要カラーに設定してください。 | | `colorBackground` | 入力、タブ、その他のコンポーネントの背景に使用されるカラー。 | | `colorText` | 使用されるデフォルトのテキストの色。 | | `colorDanger` | エラーや破壊的なアクションを示すために使用されるカラー。 | ### 使用頻度の低い変数 | 変数 | 説明 | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `buttonBorderRadius` | ボタンに使用される境界の半径。デフォルトでは、ボタンは `borderRadius` を使用します。 | | `buttonColorBackground` | ボタンの背景に使用される色。デフォルトでは、`colorPrimary` が使用されます。 | | `buttonColorText` | ボタンに使用されるテキストの色。デフォルトでは、`accessibleColorOnColorPrimary` が使用されます。 | | `focusBoxShadow` | フォーカスされたコンポーネントに使用される `box-shadow`。 | | `focusOutline` | フォーカスされたコンポーネントに使用される `outline`。 | | `fontSmooth` | 使用するテキストのアンチエイリアス設定。`always`、`auto`、`never` のいずれかになります。 | | `fontVariantLigatures` | テキストの [font-variant-ligatures](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) 設定。 | | `fontVariationSettings` | テキストの [font-variation-settings](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) 設定。 | | `fontWeightLight` | 蛍光文字のフォントの太さ。 | | `fontWeightNormal` | 標準文字のフォントの太さ。 | | `fontWeightMedium` | 中文字のフォントの太さ。 | | `fontWeightBold` | 太字文字のフォントの太さ。 | | `fontLineHeight` | テキストの [line-height](http://developer.mozilla.org/en-US/docs/Web/CSS/line-height) 設定。 | | `fontSize2Xl` | double-extra large テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeXl` | 特大テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeLg` | 大テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeSm` | 小テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSizeXs` | 極小テキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSize2Xs` | 極小より 2 段階小さいテキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `fontSize3Xs` | 極小より 3 段階小さいテキストのフォントサイズ。デフォルトでは、これは `var(--fontSizeBase)` から `rem` 単位を使用して拡大縮小されます。 | | `logoColor` | 表示されるロゴのバリエーションの設定 (`light` または `dark` のいずれか)。 | | `tabLogoColor` | `.Tab` コンポーネントに表示されるロゴのバリエーション (`light` または `dark` のいずれか)。 | | `tabLogoSelectedColor` | `.Tab--selected` コンポーネントに表示されるロゴのバリエーション (`light` または `dark` のいずれか)。 | | `blockLogoColor` | `.Block` コンポーネントに表示されるロゴのバリエーション (`light` または `dark` のいずれか)。 | | `colorSuccess` | ポジティブなアクションや成功を示すために使用されるカラー。 | | `colorWarning` | 破壊的な可能性があるアクションを示すために使用されるカラー。 | | `accessibleColorOnColorPrimary` | `var(--colorPrimary)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorBackground` | `var(--colorBackground)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorSuccess` | `var(--colorSuccess)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorDanger` | `var(--colorDanger)` 背景の前面に表示される文字の色。 | | `accessibleColorOnColorWarning` | `var(--colorWarning)` 背景の前面に表示される文字の色。 | | `colorTextSecondary` | 重要度の高いテキストに使用される色。たとえば、現在選択されていないタブのラベルなどに使用されます。 | | `colorTextPlaceholder` | 入力のプレースホルダーテキストに使用されるカラー。 | | `iconColor` | カードタブに表示されるアイコンなど、アイコンに使用されるデフォルトのカラー。 | | `iconHoverColor` | マウスカーソルを合わせたときのアイコンの色。 | | `iconCardErrorColor` | カードがエラー状態の場合に表示されるカードアイコンの色。 | | `iconCardCvcColor` | カードアイコンのセキュリティコードの色。 | | `iconCardCvcErrorColor` | セキュリティコードフィールドの入力が無効な場合に表示されるカードアイコンのセキュリティコードの色。 | | `iconCheckmarkColor` | `.Checkbox` などのコンポーネントで表示されるチェックマークの色。 | | `iconChevronDownColor` | 入力を選択する時に表示される矢印アイコンの色。 | | `iconChevronDownHoverColor` | マウスカーソルを合わせたときの矢印アイコンの色。 | | `iconCloseColor` | 終了または閉じるの操作が行われたことを示す閉じるアイコンの色。 | | `iconCloseHoverColor` | マウスカーソルを合わせたときの閉じるアイコンの色。 | | `iconLoadingIndicatorColor` | 読み込みインジケーターのスピナーの色。 | | `iconMenuColor` | 追加アクションを示すメニューアイコンの色。 | | `iconMenuHoverColor` | マウスカーソルを合わせたときのメニューアイコンの色。 | | `iconMenuOpenColor` | メニューを開いたときのメニューアイコンの色。 | | `iconPasscodeDeviceColor` | ユーザーのモバイルデバイスにメッセージが送信されたことを示すパスコードデバイスアイコンの色。 | | `iconPasscodeDeviceHoverColor` | マウスカーソルを合わせたときのパスコードデバイスアイコンの色。 | | `iconPasscodeDeviceNotificationColor` | パスコードデバイスアイコンの上に表示される通知インジケーターの色。 | | `iconRedirectColor` | リダイレクトベースの決済手段に表示されるリダイレクトアイコンの色。 | | `tabIconColor` | タブに表示されるアイコンの色。 | | `tabIconHoverColor` | マウスカーソルをタブの上に合わせたときにタブに表示されるアイコンの色。 | | `tabIconSelectedColor` | 選択されているタブに表示されるアイコンの色。 | | `tabIconMoreColor` | 追加の決済手段メニューのトリガーに表示されるアイコンの色。 | | `tabIconMoreHoverColor` | マウスカーソルをトリガーの上に合わせたときに追加の決済手段メニューのトリガーに表示されるアイコンの色。 | | `accordionItemSpacing` | `.AccordionItem` コンポーネント間の縦間隔。これは、[spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) が `true` の場合にのみ適用されます。 | | `gridColumnSpacing` | UI レイアウトに使用される、グリッド内の列間のスペース。 | | `gridRowSpacing` | UI レイアウトに使用される、グリッド内の行間のスペース。 | | `pickerItemSpacing` | `.Picker` コンポーネント内で表示される `.PickerItem` コンポーネント間の間隔。 | | `tabSpacing` | `.Tab` コンポーネント間の横間隔。 | ## ルール `rules` オプションは、CSS に類似するセレクターと CSS プロパティのマッピングであり、個々のコンポーネントをきめ細かくカスタマイズできます。`theme` および `ariables` を定義した後で、`rules` を使用して UI をサイトのデザインに合わせて導入します。 #### HTML + JS ```js const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance}); ``` #### React ```jsx import {Elements} from '@stripe/react-stripe-js'; const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to the Elements provider ``` ### すべてのルール ルールのセレクターは、UI 内の公開クラス名、および各クラスのサポートされる状態、疑似クラス、疑似要素を対象にすることができます。有効なセレクターの例を以下に示します。 - `.Tab, .Label, .Input` - `.Tab:focus` - `.Input--invalid, .Label--invalid` - `.Input::placeholder` 以下は有効なセレクターでは**ありません**。 - `.p-SomePrivateClass, img`: 公開クラス名のみターゲットにすることができます - `.Tab .TabLabel`: セレクター内での先祖子孫関係はサポートされていません - `.Tab--invalid`、`.Tab` クラスは `--invalid` 状態をサポートしません セレクターに表示される各クラス名は、[CSS プロパティの許可リストに対応](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties)しています。これは、キャメルケース ([box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) プロパティの `boxShadow` など) を使用して指定します。 以下は、サポートされているクラス名と、対応するステータス、疑似クラス、疑似要素の一覧です。 ### タブ ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesTabs@2x.9c36db7ee4c98d7b2d6f00e91e6d4f20.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ----------- | ------------ | --------------------------------------- | ---- | | `.Tab` | `--selected` | `:hover`、`:focus`、`:active`、`:disabled` | | | `.TabIcon` | `--selected` | `:hover`、`:focus`、`:active`、`:disabled` | | | `.TabLabel` | `--selected` | `:hover`、`:focus`、`:active`、`:disabled` | | ### 入力 (ラベル) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputs@2x.4ed082ee74fcbad043a80e2d4b133b35.png) モバイルの入力フィールドには、少なくとも 16px のフォントサイズを選択してください。 | クラス名 | ステータス | 疑似クラス | 疑似要素 | | -------- | --------------------------------- | ----------------------------------------- | ----------------------------- | | `.Label` | `--empty`、`--invalid`、`--focused` | | | | `.Input` | `--empty`、`--invalid` | `:hover`、`:focus`、`:disabled`、`:autofill` | `::placeholder`、`::selection` | | `.Error` | | | | ### 入力 (フローティングラベル) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputsFloating@2x.daec4a823ac24cc86d94a44664104eb8.png) > [追加の設定オプション](https://docs.stripe.com/elements/appearance-api.md#others) としてフローティングラベルを有効にできます。 | クラス名 | ステータス | 疑似クラス | 疑似要素 | | -------- | ---------------------------------------------------------- | ----------------------------------------- | ----------------------------- | | `.Label` | `--empty`、`--invalid`、`--focused`、`--floating`、`--resting` | | | | `.Input` | `--empty`、`--invalid` | `:hover`、`:focus`、`:disabled`、`:autofill` | `::placeholder`、`::selection` | | `.Error` | | | | ### ブロック ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesBlock@2x.556532f7e919aaf1d775ceb0253f5c22.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | --------------- | ------------ | --------------------------- | ---- | | `.Block` | | | | | `.BlockDivider` | | | | | `.BlockAction` | `--negative` | `:hover`、`:focus`、`:active` | | ### コード入力 ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCodeInput@2x.64975e4945d393068a2f207a2d48f25c.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------ | ----- | ----------------------------- | ---- | | `.CodeInput` | | `:hover`、`:focus`、`:disabled` | | ### チェックボックス ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCheckbox@2x.d7bedd38a342344eb06d5bff5dd6ae43.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ---------------- | ----------- | ---------------------------------- | ---- | | `.Checkbox` | `--checked` | | | | `.CheckboxLabel` | `--checked` | `:hover`、`:focus`、`:focus-visible` | | | `.CheckboxInput` | `--checked` | `:hover`、`:focus`、`:focus-visible` | | ### ドロップダウン ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesDropdown@2x.d635e032d2a254d672c11825a2d3d23d.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | --------------- | ------------- | --------- | ---- | | `.Dropdown` | | | | | `.DropdownItem` | `--highlight` | `:active` | | > macOS では、ドロップダウンのスタイルが制限されています。ドロップダウンの Appearance API は主に Windows システムに影響します。macOS では、オペレーティングシステムの制限により、システムのドロップダウン (国セレクターなど) のスタイルをこれらのルールを使用して設定することはできません。 ### 切り替え ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesSwitch@2x.a263ba8361af937d5228a35d18c63645.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ---------------- | ---------- | -------- | ---- | | `.Switch` | `--active` | `:hover` | | | `.SwitchControl` | | `:hover` | | ### ピッカー ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesPicker@2x.aa78c665be0c7e33a62992c8e7e33014.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | --------------- | ----------------------------------------------- | --------------------------- | ---- | | `.PickerItem` | `--selected`、`--highlight`、`--new`、`--disabled` | `:hover`、`:focus`、`:active` | | | `.PickerAction` | | `:hover`、`:focus`、`:active` | | 他の状態と比較して `.PickerItem` のアクティブな状態が目立つようにしてください。 | | | | | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDo@2x.cc709dc96a8e99e6b020f53216d4d585.png) | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDont@2x.b31bc4b51910a6eece59d44fa92c5b4d.png) | | **推奨** コントラストの高い原色、太いフォント、アウトラインを用いると、アクティブのステータス (顧客が選択した項目) が判別しやすくなります。 | **非推奨** .PickerItem のステータスを区別する際、同じ太さのフォントオプションやコントラストの低い色を使用しないようにしてください。アクティブの判別が難しくなります。 | ### メニュー | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------- | ------------ | --------------------------- | ---- | | `.Menu` | | | | | `.MenuIcon` | `--open` | `:hover` | | | `.MenuAction` | `--negative` | `:hover`、`:focus`、`:active` | | ### アコーディオン | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ---------------- | ------------ | ------------------------- | ---- | | `.AccordionItem` | `--selected` | `:hover`、`:focus-visible` | | ### Payment Method Messaging Element | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------------------- | ----- | ----- | ---- | | `.PaymentMethodMessaging` | | | | ### ラジオアイコン ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesRadioIcon@2x.25886d6b352ac0a8d003e7e2cd39677d.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ----------------- | ----------------------- | ----- | ---- | | `.RadioIcon` | | | | | `.RadioIconOuter` | `--checked`、`--hovered` | | | | `.RadioIconInner` | `--checked`、`--hovered` | | | `.RadioIcon` の `width` プロパティを使用して、アイコン全体のサイズを制御できます。`r` (半径) プロパティで `.RadioIconInner` の相対サイズを調整します。`.RadioIconOuter` と `.RadioIconInner` は SVG 要素であり、 `stroke` と `fill` プロパティでスタイルを指定できます。[サポートされている CSS プロパティ](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties)については、下記の一覧でご確認ください。 ```js const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } }; ``` ### 切り替え ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesToggleItem@2x.88891aff38f391f7c792a4bfeb8ad026.png) | クラス名 | ステータス | 疑似クラス | 疑似要素 | | ------------- | ------------ | --------------------------------------- | ---- | | `.ToggleItem` | `--selected` | `:active`、`:hover`、`:focus`、`:disabled` | | ### サポートされている CSS プロパティ | CSS プロパティ | サポートされているクラス | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-moz-osx-font-smoothing` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `-webkit-font-smoothing` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `-webkit-text-fill-color` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `backgroundColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`BlockDivider`、`Button`、`CheckboxInput`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`InputDivider`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`Switch`、`Tab`、`ToggleItem` | | `border` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottom` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomLeftRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomRightRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderBottomWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeft` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeftColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeftStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderLeftWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `borderRight` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRightColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRightStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderRightWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTop` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopColor` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopLeftRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopRightRadius` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopStyle` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderTopWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `borderWidth` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Switch`、`SwitchControl`、`Tab`、`TermsText`、`Text`、`ToggleItem` | | `boxShadow` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`ToggleItem` | | `color` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabIcon`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fill` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RadioIconInner`、`RadioIconOuter`、`SwitchControl`、`Tab`、`TabIcon`、`ToggleItem` | | `fillOpacity` | `RadioIconInner`、`RadioIconOuter` | | `fontFamily` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fontSize` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Switch`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fontVariant` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `fontWeight` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `letterSpacing` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `lineHeight` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `margin` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginBottom` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginLeft` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginRight` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `marginTop` | `Action`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`MenuAction`、`PickerAction`、`PickerItem`、`Tab`、`ToggleItem` | | `opacity` | `Label` | | `outline` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`ToggleItem` | | `outlineOffset` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Input`、`InputCloseIcon`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TermsLink`、`ToggleItem` | | `padding` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingBottom` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingLeft` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingRight` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `paddingTop` | `AccordionItem`、`Action`、`Block`、`BlockAction`、`Button`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Menu`、`MenuAction`、`MenuIcon`、`PickerAction`、`PickerItem`、`RedirectText`、`Tab`、`TabIcon`、`TabLabel`、`TermsText`、`Text`、`ToggleItem` | | `r` | `RadioIconInner` | | `stroke` | `RadioIconInner`、`RadioIconOuter` | | `strokeOpacity` | `RadioIconInner`、`RadioIconOuter` | | `strokeWidth` | `RadioIconInner`、`RadioIconOuter` | | `textAlign` | `PaymentMethodMessaging` | | `textDecoration` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `textShadow` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `textTransform` | `AccordionItem`、`Action`、`BlockAction`、`Button`、`Checkbox`、`CheckboxLabel`、`CodeInput`、`DropdownItem`、`Error`、`Input`、`Label`、`Link`、`MenuAction`、`PickerAction`、`PickerItem`、`RedirectText`、`SecondaryLink`、`Tab`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `transition` | `Action`、`Block`、`BlockAction`、`Button`、`CheckboxInput`、`CheckboxLabel`、`CodeInput`、`Dropdown`、`DropdownItem`、`Error`、`Icon`、`Input`、`InputCloseIcon`、`Label`、`Link`、`MenuAction`、`MenuIcon`、`PasscodeCloseIcon`、`PasscodeShowIcon`、`PickerAction`、`PickerItem`、`RadioIconInner`、`RadioIconOuter`、`RedirectText`、`SecondaryLink`、`Switch`、`SwitchControl`、`Tab`、`TabIcon`、`TabLabel`、`TermsLink`、`TermsText`、`Text`、`ToggleItem` | | `width` | `RadioIcon` | 上記のプロパティにはいくつかの例外があります。 - `-webkit-text-fill-color` は疑似クラスと互換性がありません ## その他の設定オプション `themes`、`labels`、`inputs`、`variables`、`rules` に加えて、Elements のスタイルは、その他の外観設定オプションを使用して設定できます。 これらは、Appearance オブジェクトに追加することでカスタマイズ可能です。 ```js const appearance = { disableAnimations: true, // other configurations such as `theme`, `labels`, `inputs`, `variables` and `rules`... } ``` 現在、使用可能なオプションは以下のとおりです。 | 設定 | 説明 | | ------------------- | --------------------------------------------- | | `disableAnimations` | UI 全体でアニメーションを無効にします。ブール値で、デフォルトは `false` です。 |