# Elements Appearance API Passen Sie das Erscheinungsbild von Elements an das Design Ihrer Website an. Stripe Elements unterstützt die visuelle Anpassung, wodurch Sie das Design Ihrer Website mit der Option `appearance` verändern können. Das Layout der einzelnen Elemente bleibt konsistent, Sie können jedoch u. a. Farben, Schriftarten, Rahmen und Abstände ändern. 1. Wählen Sie ein vorgefertigtes [Design](https://docs.stripe.com/elements/appearance-api.md#theme) aus, das zu Ihrer Website passt. 1. Passen Sie das Design mithilfe von [Eingaben und Labels](https://docs.stripe.com/elements/appearance-api.md#inputs-and-labels) an. Sie können auch [Variablen](https://docs.stripe.com/elements/appearance-api.md#variables) wie `fontFamily` und `colorPrimary` festlegen, um die in jedem Element angezeigten Komponenten umfassend anzupassen. 1. Bei Bedarf können Sie einzelne Komponenten und Status mithilfe von [Regeln](https://docs.stripe.com/elements/appearance-api.md#rules) weiter anpassen. Für vollständige Kontrolle geben Sie nutzerdefinierte CSS-Eigenschaften für einzelne Komponenten an, die in dem Element auftreten. > Die Elements Appearance API unterstützt keine individuellen Zahlungsmethoden-Elemente (z. B. `CardElement`). Verwenden Sie stattdessen das Objekt [Style](https://docs.stripe.com/js/appendix/style), um Ihr Element anzupassen. # 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. ## Designs Beginnen Sie mit der Anpassung von Checkout Elements, indem Sie eines der folgenden Designs auswählen: - `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 ``` ## Eingaben und Labels Passen Sie die Erscheinung der Eingabefelder und ihrer zugehörigen Labels an. `const appearance = { inputs: 'spaced', labels: 'auto' }` ### Eingaben Wählen Sie den Stil der Eingabefelder, der zu Ihrem Design passt. | Variante | Beschreibung | | ----------- | ---------------------------------------------------------------------------------------------- | | `spaced` | Jedes Eingabefeld ist von Leerzeichen umgeben. Dies ist die Standardoption. | | `condensed` | Verwandte Eingabefelder werden ohne Abstand zueinander gruppiert. Dies ist die Standardoption. | ### Labels Steuern Sie die Position und Sichtbarkeit von Labels, die mit Eingabefeldern verknüpft sind. | Variante | Beschreibung | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `auto` | Labels passen sich an den Input-Typ an. Wenn Inputs `spaced` angezeigt werden, stehen die Labels darüber (`above`). Bei kompakten (`condensed`) Inputs schweben (`floating`) die Labels. Dies ist die Standardoption. | | `above` | Labels werden oberhalb der zugehörigen Eingabefelder positioniert. | | `floating` | Labels schweben innerhalb der Eingabefelder. | ## Variablen Legen Sie Variablen fest, um die Darstellung von Komponenten anzupassen, die in jedem Checkout Element auftreten. ![Zahlungsformular mit Karteneingabefeldern, den wichtigsten Kreditkartensymbolen und der Zahlungsoption Klarna mit beschrifteten Appearance API-Variablen für Farben und Design.](https://b.stripecdn.com/docs-statics-srv/assets/exampleVariables@2x.8c50d1561d5d4fbb1ac0187983ab33c0.png) Die Option `variables` funktioniert wie [CSS-Variablen](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Sie können mit der Syntax `var(--myVariable)` den CSS-Wert für jede Variable angeben und auf andere Erscheinungsvariablen verweisen. Sie können sogar das daraus resultierende DOM-Element mit dem DOM-Explorer Ihres Browsers überprüfen. > Die Variablen `colorPrimary`, `colorBackground`, `colorText`, `colorSuccess`, `colorDanger` und `colorWarning` unterstützen weder `rgba()` noch die Syntax `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 ``` ### Häufig genutzte Variablen | Variable | Beschreibung | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `fontFamily` | Die in der gesamten Nutzeroberfläche verwendete Schriftartenfamilie. Checkout Elements unterstützt nutzerdefinierte Schriftarten, indem die Option `fonts` an [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-fonts) oder [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-fonts) übergeben wird. | | `fontSizeBase` | Die Schriftgröße, die für das Stammverzeichnis der Nutzeroberfläche festgelegt ist. Standardmäßig werden andere Schriftgrößenvariablen wie `fontSizeXs` oder `fontSizeSm` von diesem Wert mit `rem`-Einheiten skaliert. Für Eingabefelder auf Mobilgeräten sollten Sie eine Schriftgröße von mindestens 16 px wählen. | | `spacingUnit` | Die Basis-Abstandseinheit, von der alle anderen Abstände abgeleitet werden. Erhöhen oder verringern Sie diesen Wert, um Ihrem Layout mehr oder weniger Platz zu geben. | | `borderRadius` | Der Rahmenradius, der für Registerkarten, Eingaben und andere Komponenten verwendet wird. | | `colorPrimary` | Eine Primärfarbe, die in der gesamten Nutzeroberfläche verwendet wird. Legen Sie diese Farbe als Ihre primäre Markenfarbe fest. | | `colorBackground` | Die Farbe, die für den Hintergrund von Eingaben, Registerkarten und anderen Komponenten verwendet wird. | | `colorText` | Die verwendete Standard-Textfarbe. | | `colorDanger` | Eine Farbe, die zur Anzeige von Fehlern oder schädlichen Aktionen verwendet wird. | ### Weniger häufig genutzte Variablen | Variable | Beschreibung | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `buttonBorderRadius` | Der für Schaltflächen verwendete Rahmenradius. Standardmäßig verwenden Schaltflächen `borderRadius`. | | `buttonColorBackground` | Die Farbe, die für den Hintergrund der Schaltflächen verwendet wird. Standardmäßig wird `colorPrimary` für die Schaltflächen verwendet. | | `buttonColorText` | Die Textfarbe, die für die Schaltflächen verwendet wird. Standardmäßig wird `accessibleColorOnColorPrimary` für die Schaltflächen verwendet. | | `focusBoxShadow` | Der `Kastenschatten` für fokussierte Komponenten. | | `focusOutline` | Der `Umriss` für fokussierte Komponenten. | | `fontSmooth` | Welche Text-Antialiasing-Einstellungen verwendet werden sollen. Kann `always`, `auto` oder `never` sein. | | `fontVariantLigatures` | Die Einstellung [font-variant-ligatures](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) für Text. | | `fontVariationSettings` | Die Einstellung [font-variation-settings](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) für Text. | | `fontWeightLight` | Die für dünnen Text verwendete Schriftstärke. | | `fontWeightNormal` | Die für normalen Text verwendete Schriftstärke. | | `fontWeightMedium` | Die für halbfetten Text verwendete Schriftstärke. | | `fontWeightBold` | Die für fetten Text verwendete Schriftstärke. | | `fontLineHeight` | Die Einstellung für die [Zeilenhöhe](http://developer.mozilla.org/en-US/docs/Web/CSS/line-height) des Textes. | | `fontSize2Xl` | Die Schriftgröße von doppelt extra großem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeXl` | Die Schriftgröße von extra großem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeLg` | Die Schriftgröße von großem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeSm` | Die Schriftgröße für kleinen Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeXs` | Die Schriftgröße für extra kleinen Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSize2Xs` | Die Schriftgröße von doppelt extra kleinem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSize3Xs` | Die Schriftgröße von dreifach extra kleinem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `logoColor` | Eine Präferenz für die Logo-Varianten, die angezeigt werden sollen; entweder `light` oder `dark`. | | `tabLogoColor` | Die Logovariante, die innerhalb der `.Tab`-Komponenten angezeigt werden soll (entweder `light` oder `dark`). | | `tabLogoSelectedColor` | Die Logovariante, die innerhalb der `.Tab--selected`-Komponente angezeigt werden soll (entweder `light` oder `dark`). | | `blockLogoColor` | Die Logovariante, die innerhalb der `.Block`-Komponenten angezeigt werden soll (entweder `light` oder `dark`). | | `colorSuccess` | Eine Farbe, die zur Anzeige positiver Aktionen oder erfolgreicher Ergebnisse verwendet wird. | | `colorWarning` | Eine Farbe, die für die Anzeige potenziell schädlicher Aktionen verwendet wird. | | `accessibleColorOnColorPrimary` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorPrimary)` erscheint. | | `accessibleColorOnColorBackground` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorBackground)` erscheint. | | `accessibleColorOnColorSuccess` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorSuccess)` erscheint. | | `accessibleColorOnColorDanger` | Die Farbe von Text, der über jedem `var(--colorDanger)` Hintergrund erscheint. | | `accessibleColorOnColorWarning` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorWarning)` erscheint. | | `colorTextSecondary` | Die Farbe, die für Text von sekundärer Bedeutung verwendet wird. Diese Farbe wird z. B. für die Beschriftung einer Registerkarte verwendet, die aktuell nicht ausgewählt ist. | | `colorTextPlaceholder` | Die Farbe, die für Eingabe-Platzhaltertext verwendet wird. | | `iconColor` | Die Standardfarbe, die für Symbole verwendet wird (z. B. das Symbol auf der Registerkarte „Karte“). | | `iconHoverColor` | Die Farbe der Symbole, wenn der Mauszeiger darüber bewegt wird. | | `iconCardErrorColor` | Die Farbe des Kartensymbols, wenn es sich in einem Fehlerzustand befindet. | | `iconCardCvcColor` | Die Farbe der CVC-Variante des Kartensymbols. | | `iconCardCvcErrorColor` | Die Farbe der CVC-Variante des Kartensymbols, wenn das CVC-Feld ungültige Eingaben enthält. | | `iconCheckmarkColor` | Die Farbe von Häkchen, die in Komponenten wie `.Checkbox` angezeigt werden. | | `iconChevronDownColor` | Die Farbe der Pfeilsymbole, die in ausgewählten Eingaben angezeigt werden. | | `iconChevronDownHoverColor` | Die Farbe der Pfeilsymbole, wenn der Mauszeiger darüber bewegt wird. | | `iconCloseColor` | Die Farbe von Schließsymbolen, die zur Anzeige einer Kündigungs- oder Schließungsaktion verwendet werden. | | `iconCloseHoverColor` | Die Farbe von Schließsymbolen, wenn der Mauszeiger darüber bewegt wird. | | `iconLoadingIndicatorColor` | Die Farbe der Sanduhr in den Ladeindikatoren. | | `iconMenuColor` | Die Farbe von Menüsymbolen, die verwendet werden, um eine Reihe zusätzlicher Aktionen anzuzeigen. | | `iconMenuHoverColor` | Die Farbe der Menüsymbole, wenn der Mauszeiger darüber bewegt wird. | | `iconMenuOpenColor` | Die Farbe der geöffneten Menüsymbole. | | `iconPasscodeDeviceColor` | Farbe des Passcode-Gerätesymbols, das anzeigt, dass eine Nachricht an das Mobilgerät des Nutzers/der Nutzerin gesendet wurde. | | `iconPasscodeDeviceHoverColor` | Die Farbe des Passcode-Gerätesymbols, wenn der Mauszeiger darüber bewegt wird. | | `iconPasscodeDeviceNotificationColor` | Die Farbe der Benachrichtigungsanzeige, die über dem Codegerätesymbol angezeigt wird. | | `iconRedirectColor` | Die Farbe des Weiterleitungssymbols, das für Zahlungsmethoden mit Weiterleitung erscheint. | | `tabIconColor` | Die Farbe der Symbole, die auf einer Registerkarte erscheinen. | | `tabIconHoverColor` | Die Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn der Mauszeiger über die Registerkarte bewegt wird. | | `tabIconSelectedColor` | Die Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn die Registerkarte ausgewählt wird. | | `tabIconMoreColor` | Die Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint. | | `tabIconMoreHoverColor` | Die Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint, wenn der Mauszeiger über den Auslöser bewegt wird. | | `accordionItemSpacing` | Der vertikale Abstand zwischen `.AccordionItem`-Komponenten. Dies gilt nur, wenn [spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) `true` ist. | | `gridColumnSpacing` | Der Abstand zwischen den Spalten im Raster für das Layout der Nutzeroberfläche. | | `gridRowSpacing` | Der Abstand zwischen den Zeilen im Raster für das Layout der Nutzeroberfläche. | | `pickerItemSpacing` | Der Abstand zwischen den `.PickerItem`-Komponenten, gerendert innerhalb der `.Picker`-Komponente. | | `tabSpacing` | Der horizontale Abstand zwischen den `.Tab`-Komponenten. | ## Regeln Die Option `rules` ist eine Zuordnung von CSS-ähnlichen Selektoren zu CSS-Eigenschaften, die eine umfassendere Anpassung einzelner Komponenten ermöglicht. Nachdem Sie Ihr `theme` und Ihre `variables` definiert haben, integrieren Sie die Nutzeroberfläche mithilfe von `rules` in das Design Ihrer Website. #### 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 ``` ### Alle Regeln Der Selektor kann jeden der öffentlichen Klassennamen zum Ziel haben, ebenso wie die Nutzeroberfläche und die unterstützten Status, Pseudo-Klassen und Pseudo-Elemente für jede Klasse. Die folgenden Selektoren sind beispielsweise gültig: - `.Tab, .Label, .Input` - `.Tab:focus` - `.Input--invalid, .Label--invalid` - `.Input::placeholder` Die folgenden Selektoren sind **nicht** gültig: - `.p-SomePrivateClass, img`, nur öffentliche Klassennamen können das Ziel sein - `.Tab .TabLabel`, Vorgänger-Nachfolger-Beziehungen in Selektoren werden nicht unterstützt - `.Tab--invalid`, die Klasse `.Tab` unterstützt den Status `--invalid` nicht Jeder in einem Selektor verwendete Klassenname [unterstützt eine Liste zulässiger CSS-Eigenschaften](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties), die in Camel-Case-Schreibweise angegeben werden (z. B. `boxShadow` für die Eigenschaft [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)). Nachfolgend finden Sie eine vollständige Liste aller unterstützten Klassennamen und entsprechenden Status, Pseudo-Klassen und Pseudo-Elemente: ### Registerkarten ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesTabs@2x.9c36db7ee4c98d7b2d6f00e91e6d4f20.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------- | ---------------- | ------------------------------------------ | --------------- | | `.Tab` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabIcon` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabLabel` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | ### Eingaben (über Labels) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputs@2x.4ed082ee74fcbad043a80e2d4b133b35.png) Wählen Sie bei Eingabefeldern auf Mobilgeräten unbedingt eine Schriftgröße von mindestens 16px. | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------- | ----------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Eingaben (schwebende Labels) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputsFloating@2x.daec4a823ac24cc86d94a44664104eb8.png) > Sie können Labels, die ihre Position dem Textfluss anpassen, als [zusätzliche Konfigurationsoption](https://docs.stripe.com/elements/appearance-api.md#others) aktivieren. | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------- | -------------------------------------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused`, `--floating`, `--resting` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Ablehnen ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesBlock@2x.556532f7e919aaf1d775ceb0253f5c22.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | --------------- | ---------------- | ----------------------------- | --------------- | | `.Block` | | | | | `.BlockDivider` | | | | | `.BlockAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Codeeingabe ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCodeInput@2x.64975e4945d393068a2f207a2d48f25c.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------ | ---------------- | ------------------------------- | --------------- | | `.CodeInput` | | `:hover`, `:focus`, `:disabled` | | ### Kontrollkästchen ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCheckbox@2x.d7bedd38a342344eb06d5bff5dd6ae43.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ---------------- | ---------------- | ------------------------------------ | --------------- | | `.Checkbox` | `--checked` | | | | `.CheckboxLabel` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | | `.CheckboxInput` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | ### Dropdown ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesDropdown@2x.d635e032d2a254d672c11825a2d3d23d.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | --------------- | ---------------- | -------------- | --------------- | | `.Dropdown` | | | | | `.DropdownItem` | `--highlight` | `:active` | | > Die Gestaltung von Dropdown-Menüs ist unter macOS eingeschränkt. Die API für das Erscheinungsbild von Dropdown-Menüs betrifft in erster Linie Windows-Systeme. Unter macOS können Sie System-Dropdown-Menüs (wie beispielsweise die Länderauswahl) aufgrund von Einschränkungen des Betriebssystems nicht mit diesen Regeln gestalten. ### Umschalter ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesSwitch@2x.a263ba8361af937d5228a35d18c63645.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ---------------- | ---------------- | -------------- | --------------- | | `.Switch` | `--active` | `:hover` | | | `.SwitchControl` | | `:hover` | | ### Auswahl ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesPicker@2x.aa78c665be0c7e33a62992c8e7e33014.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | --------------- | -------------------------------------------------- | ----------------------------- | --------------- | | `.PickerItem` | `--selected`, `--highlight`, `--new`, `--disabled` | `:hover`, `:focus`, `:active` | | | `.PickerAction` | | `:hover`, `:focus`, `:active` | | Stellen Sie sicher, dass sich Ihr aktiver `.PickerItem`-Status von den anderen Status unterscheidet. | | | | | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDo@2x.cc709dc96a8e99e6b020f53216d4d585.png) | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDont@2x.b31bc4b51910a6eece59d44fa92c5b4d.png) | | **RICHTIG** Verwenden Sie zur Unterscheidung des aktiven Status, den Ihre Kundin/Ihr Kunde bereits ausgewählt hat, eine auffällige, kontrastreiche Grundfarbe, eine Gewichtung und/oder einen Umriss. | **NEIN** Verwenden Sie für Ihre .PickerItem-Status keine zwei gleich gewichteten Optionen oder kontrastarmen Farben. Das erschwert die Unterscheidung, welcher Status aktiv ist. | ### Menü | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------- | ---------------- | ----------------------------- | --------------- | | `.Menu` | | | | | `.MenuIcon` | `--open` | `:hover` | | | `.MenuAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Accordion | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ---------------- | ---------------- | --------------------------- | --------------- | | `.AccordionItem` | `--selected` | `:hover` , `:focus-visible` | | ### Payment Method Messaging Element | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------------------- | ---------------- | -------------- | --------------- | | `.PaymentMethodMessaging` | | | | ### Optionsfeld-Symbol ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesRadioIcon@2x.25886d6b352ac0a8d003e7e2cd39677d.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------------- | ------------------------ | -------------- | --------------- | | `.RadioIcon` | | | | | `.RadioIconOuter` | `--checked`, `--hovered` | | | | `.RadioIconInner` | `--checked`, `--hovered` | | | Sie können die Gesamtgröße des Symbols mit der Eigenschaft `width` für `.RadioIcon` steuern. Sie können die relative Größe von `.RadioIconInner` mit der Eigenschaft `r` (Radius) steuern. `.RadioIconOuter` und `.RadioIconInner` sind SVG-Elemente und können mit `stroke`- und `fill`-Eigenschaften gestaltet werden. Unten finden Sie eine vollständige Liste der [unterstützten CSS-Eigenschaften](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties). ```js const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } }; ``` ### Umschalten ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesToggleItem@2x.88891aff38f391f7c792a4bfeb8ad026.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------- | ---------------- | ------------------------------------------ | --------------- | | `.ToggleItem` | `--selected` | `:active`, `:hover`, `:focus`, `:disabled` | | ### Unterstützte CSS-Eigenschaften | CSS-Eigenschaft | Unterstützte Klassen | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-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` | Einige Ausnahmen zu den obigen Eigenschaften sind: - `-webkit-text-fill-color` ist nicht kompatibel mit Pseudo-Klassen ## Weitere Konfigurationsoptionen Zusätzlich zu den `Themen`, `Labels`, `Eingaben`, `Variablen` und `Regeln` können Sie Elemente mithilfe weiterer Optionen zur Erscheinungskonfiguration gestalten. Sie können die Optionen anpassen, indem Sie sie dem Appearance-Objekt hinzufügen: ```js const appearance = { disableAnimations: true, // other configurations such as `theme`, `labels`, `inputs`, `variables` and `rules`... } ``` Aktuell unterstützen wir folgende Optionen: | Konfiguration | Beschreibung | | ------------------- | ---------------------------------------------------------------------------------- | | `disableAnimations` | Deaktiviert Animationen in der Nutzeroberfläche. Boolescher Standardwert: `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. ## Designs Beginnen Sie mit der Anpassung von Elements, indem Sie eins der folgenden Designs auswählen: - `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 ``` ## Eingaben und Labels Passen Sie die Erscheinung der Eingabefelder und ihrer zugehörigen Labels an. `const appearance = { inputs: 'spaced', labels: 'auto' }` ### Eingaben Wählen Sie den Stil der Eingabefelder, der zu Ihrem Design passt. | Variante | Beschreibung | | ----------- | ---------------------------------------------------------------------------------------------- | | `spaced` | Jedes Eingabefeld ist von Leerzeichen umgeben. Dies ist die Standardoption. | | `condensed` | Verwandte Eingabefelder werden ohne Abstand zueinander gruppiert. Dies ist die Standardoption. | ### Labels Steuern Sie die Position und Sichtbarkeit von Labels, die mit Eingabefeldern verknüpft sind. | Variante | Beschreibung | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `auto` | Labels passen sich an den Input-Typ an. Wenn Inputs `spaced` angezeigt werden, stehen die Labels darüber (`above`). Bei kompakten (`condensed`) Inputs schweben (`floating`) die Labels. Dies ist die Standardoption. | | `above` | Labels werden oberhalb der zugehörigen Eingabefelder positioniert. | | `floating` | Labels schweben innerhalb der Eingabefelder. | ## Variablen Legen Sie Variablen fest, um die Darstellung von Komponenten anzupassen, die in jedem Element auftreten. ![Zahlungsformular mit Karteneingabefeldern, den wichtigsten Kreditkartensymbolen und der Zahlungsoption Klarna mit beschrifteten Appearance API-Variablen für Farben und Design.](https://b.stripecdn.com/docs-statics-srv/assets/exampleVariables@2x.8c50d1561d5d4fbb1ac0187983ab33c0.png) Die Option `variables` funktioniert wie [CSS-Variablen](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Sie können mit der Syntax `var(--myVariable)` den CSS-Wert für jede Variable angeben und auf andere Erscheinungsvariablen verweisen. Sie können sogar das daraus resultierende DOM-Element mit dem DOM-Explorer Ihres Browsers überprüfen. > Die Variablen `colorPrimary`, `colorBackground`, `colorText`, `colorSuccess`, `colorDanger` und `colorWarning` unterstützen weder `rgba()` noch die Syntax `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 ``` ### Häufig genutzte Variablen | Variable | Beschreibung | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fontFamily` | Die in der gesamten Nutzeroberfläche verwendete Schriftartenfamilie. Elements unterstützt nutzerdefinierte Schriftarten, indem die Option `fonts` an die [Elements-Gruppe](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-fonts) übergeben wird. | | `fontSizeBase` | Die Schriftgröße, die für das Stammverzeichnis der Nutzeroberfläche festgelegt ist. Standardmäßig werden andere Schriftgrößenvariablen wie `fontSizeXs` oder `fontSizeSm` von diesem Wert mit `rem`-Einheiten skaliert. Für Eingabefelder auf Mobilgeräten sollten Sie eine Schriftgröße von mindestens 16 px wählen. | | `spacingUnit` | Die Basis-Abstandseinheit, von der alle anderen Abstände abgeleitet werden. Erhöhen oder verringern Sie diesen Wert, um Ihrem Layout mehr oder weniger Platz zu geben. | | `borderRadius` | Der Rahmenradius, der für Registerkarten, Eingaben und andere Komponenten verwendet wird. | | `colorPrimary` | Eine Primärfarbe, die in der gesamten Nutzeroberfläche verwendet wird. Legen Sie diese Farbe als Ihre primäre Markenfarbe fest. | | `colorBackground` | Die Farbe, die für den Hintergrund von Eingaben, Registerkarten und anderen Komponenten verwendet wird. | | `colorText` | Die verwendete Standard-Textfarbe. | | `colorDanger` | Eine Farbe, die zur Anzeige von Fehlern oder schädlichen Aktionen verwendet wird. | ### Weniger häufig genutzte Variablen | Variable | Beschreibung | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `buttonBorderRadius` | Der für Schaltflächen verwendete Rahmenradius. Standardmäßig verwenden Schaltflächen `borderRadius`. | | `buttonColorBackground` | Die Farbe, die für den Hintergrund der Schaltflächen verwendet wird. Standardmäßig wird `colorPrimary` für die Schaltflächen verwendet. | | `buttonColorText` | Die Textfarbe, die für die Schaltflächen verwendet wird. Standardmäßig wird `accessibleColorOnColorPrimary` für die Schaltflächen verwendet. | | `focusBoxShadow` | Der `Kastenschatten` für fokussierte Komponenten. | | `focusOutline` | Der `Umriss` für fokussierte Komponenten. | | `fontSmooth` | Welche Text-Antialiasing-Einstellungen verwendet werden sollen. Kann `always`, `auto` oder `never` sein. | | `fontVariantLigatures` | Die Einstellung [font-variant-ligatures](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) für Text. | | `fontVariationSettings` | Die Einstellung [font-variation-settings](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) für Text. | | `fontWeightLight` | Die für dünnen Text verwendete Schriftstärke. | | `fontWeightNormal` | Die für normalen Text verwendete Schriftstärke. | | `fontWeightMedium` | Die für halbfetten Text verwendete Schriftstärke. | | `fontWeightBold` | Die für fetten Text verwendete Schriftstärke. | | `fontLineHeight` | Die Einstellung für die [Zeilenhöhe](http://developer.mozilla.org/en-US/docs/Web/CSS/line-height) des Textes. | | `fontSize2Xl` | Die Schriftgröße von doppelt extra großem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeXl` | Die Schriftgröße von extra großem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeLg` | Die Schriftgröße von großem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeSm` | Die Schriftgröße für kleinen Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSizeXs` | Die Schriftgröße für extra kleinen Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSize2Xs` | Die Schriftgröße von doppelt extra kleinem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `fontSize3Xs` | Die Schriftgröße von dreifach extra kleinem Text. Standardmäßig wird diese anhand von `var(--fontSizeBase)` unter Verwendung von `rem-Einheiten` skaliert. | | `logoColor` | Eine Präferenz für die Logo-Varianten, die angezeigt werden sollen; entweder `light` oder `dark`. | | `tabLogoColor` | Die Logovariante, die innerhalb der `.Tab`-Komponenten angezeigt werden soll (entweder `light` oder `dark`). | | `tabLogoSelectedColor` | Die Logovariante, die innerhalb der `.Tab--selected`-Komponente angezeigt werden soll (entweder `light` oder `dark`). | | `blockLogoColor` | Die Logovariante, die innerhalb der `.Block`-Komponenten angezeigt werden soll (entweder `light` oder `dark`). | | `colorSuccess` | Eine Farbe, die zur Anzeige positiver Aktionen oder erfolgreicher Ergebnisse verwendet wird. | | `colorWarning` | Eine Farbe, die für die Anzeige potenziell schädlicher Aktionen verwendet wird. | | `accessibleColorOnColorPrimary` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorPrimary)` erscheint. | | `accessibleColorOnColorBackground` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorBackground)` erscheint. | | `accessibleColorOnColorSuccess` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorSuccess)` erscheint. | | `accessibleColorOnColorDanger` | Die Farbe von Text, der über jedem `var(--colorDanger)` Hintergrund erscheint. | | `accessibleColorOnColorWarning` | Die Farbe von Text, der auf einem Hintergrund von `var(--colorWarning)` erscheint. | | `colorTextSecondary` | Die Farbe, die für Text von sekundärer Bedeutung verwendet wird. Diese Farbe wird z. B. für die Beschriftung einer Registerkarte verwendet, die aktuell nicht ausgewählt ist. | | `colorTextPlaceholder` | Die Farbe, die für Eingabe-Platzhaltertext verwendet wird. | | `iconColor` | Die Standardfarbe, die für Symbole verwendet wird (z. B. das Symbol auf der Registerkarte „Karte“). | | `iconHoverColor` | Die Farbe der Symbole, wenn der Mauszeiger darüber bewegt wird. | | `iconCardErrorColor` | Die Farbe des Kartensymbols, wenn es sich in einem Fehlerzustand befindet. | | `iconCardCvcColor` | Die Farbe der CVC-Variante des Kartensymbols. | | `iconCardCvcErrorColor` | Die Farbe der CVC-Variante des Kartensymbols, wenn das CVC-Feld ungültige Eingaben enthält. | | `iconCheckmarkColor` | Die Farbe von Häkchen, die in Komponenten wie `.Checkbox` angezeigt werden. | | `iconChevronDownColor` | Die Farbe der Pfeilsymbole, die in ausgewählten Eingaben angezeigt werden. | | `iconChevronDownHoverColor` | Die Farbe der Pfeilsymbole, wenn der Mauszeiger darüber bewegt wird. | | `iconCloseColor` | Die Farbe von Schließsymbolen, die zur Anzeige einer Kündigungs- oder Schließungsaktion verwendet werden. | | `iconCloseHoverColor` | Die Farbe von Schließsymbolen, wenn der Mauszeiger darüber bewegt wird. | | `iconLoadingIndicatorColor` | Die Farbe der Sanduhr in den Ladeindikatoren. | | `iconMenuColor` | Die Farbe von Menüsymbolen, die verwendet werden, um eine Reihe zusätzlicher Aktionen anzuzeigen. | | `iconMenuHoverColor` | Die Farbe der Menüsymbole, wenn der Mauszeiger darüber bewegt wird. | | `iconMenuOpenColor` | Die Farbe der geöffneten Menüsymbole. | | `iconPasscodeDeviceColor` | Farbe des Passcode-Gerätesymbols, das anzeigt, dass eine Nachricht an das Mobilgerät des Nutzers/der Nutzerin gesendet wurde. | | `iconPasscodeDeviceHoverColor` | Die Farbe des Passcode-Gerätesymbols, wenn der Mauszeiger darüber bewegt wird. | | `iconPasscodeDeviceNotificationColor` | Die Farbe der Benachrichtigungsanzeige, die über dem Codegerätesymbol angezeigt wird. | | `iconRedirectColor` | Die Farbe des Weiterleitungssymbols, das für Zahlungsmethoden mit Weiterleitung erscheint. | | `tabIconColor` | Die Farbe der Symbole, die auf einer Registerkarte erscheinen. | | `tabIconHoverColor` | Die Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn der Mauszeiger über die Registerkarte bewegt wird. | | `tabIconSelectedColor` | Die Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn die Registerkarte ausgewählt wird. | | `tabIconMoreColor` | Die Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint. | | `tabIconMoreHoverColor` | Die Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint, wenn der Mauszeiger über den Auslöser bewegt wird. | | `accordionItemSpacing` | Der vertikale Abstand zwischen `.AccordionItem`-Komponenten. Dies gilt nur, wenn [spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) `true` ist. | | `gridColumnSpacing` | Der Abstand zwischen den Spalten im Raster für das Layout der Nutzeroberfläche. | | `gridRowSpacing` | Der Abstand zwischen den Zeilen im Raster für das Layout der Nutzeroberfläche. | | `pickerItemSpacing` | Der Abstand zwischen den `.PickerItem`-Komponenten, gerendert innerhalb der `.Picker`-Komponente. | | `tabSpacing` | Der horizontale Abstand zwischen den `.Tab`-Komponenten. | ## Regeln Die Option `rules` ist eine Zuordnung von CSS-ähnlichen Selektoren zu CSS-Eigenschaften, die eine umfassendere Anpassung einzelner Komponenten ermöglicht. Nachdem Sie Ihr `theme` und Ihre `variables` definiert haben, integrieren Sie die Nutzeroberfläche mithilfe von `rules` in das Design Ihrer Website. #### 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 ``` ### Alle Regeln Der Selektor kann jeden der öffentlichen Klassennamen zum Ziel haben, ebenso wie die Nutzeroberfläche und die unterstützten Status, Pseudo-Klassen und Pseudo-Elemente für jede Klasse. Die folgenden Selektoren sind beispielsweise gültig: - `.Tab, .Label, .Input` - `.Tab:focus` - `.Input--invalid, .Label--invalid` - `.Input::placeholder` Die folgenden Selektoren sind **nicht** gültig: - `.p-SomePrivateClass, img`, nur öffentliche Klassennamen können das Ziel sein - `.Tab .TabLabel`, Vorgänger-Nachfolger-Beziehungen in Selektoren werden nicht unterstützt - `.Tab--invalid`, die Klasse `.Tab` unterstützt den Status `--invalid` nicht Jeder in einem Selektor verwendete Klassenname [unterstützt eine Liste zulässiger CSS-Eigenschaften](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties), die in Camel-Case-Schreibweise angegeben werden (z. B. `boxShadow` für die Eigenschaft [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)). Nachfolgend finden Sie eine vollständige Liste aller unterstützten Klassennamen und entsprechenden Status, Pseudo-Klassen und Pseudo-Elemente: ### Registerkarten ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesTabs@2x.9c36db7ee4c98d7b2d6f00e91e6d4f20.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------- | ---------------- | ------------------------------------------ | --------------- | | `.Tab` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabIcon` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabLabel` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | ### Eingaben (über Labels) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputs@2x.4ed082ee74fcbad043a80e2d4b133b35.png) Wählen Sie bei Eingabefeldern auf Mobilgeräten unbedingt eine Schriftgröße von mindestens 16px. | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------- | ----------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Eingaben (schwebende Labels) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputsFloating@2x.daec4a823ac24cc86d94a44664104eb8.png) > Sie können Labels, die ihre Position dem Textfluss anpassen, als [zusätzliche Konfigurationsoption](https://docs.stripe.com/elements/appearance-api.md#others) aktivieren. | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------- | -------------------------------------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused`, `--floating`, `--resting` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Ablehnen ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesBlock@2x.556532f7e919aaf1d775ceb0253f5c22.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | --------------- | ---------------- | ----------------------------- | --------------- | | `.Block` | | | | | `.BlockDivider` | | | | | `.BlockAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Codeeingabe ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCodeInput@2x.64975e4945d393068a2f207a2d48f25c.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------ | ---------------- | ------------------------------- | --------------- | | `.CodeInput` | | `:hover`, `:focus`, `:disabled` | | ### Kontrollkästchen ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCheckbox@2x.d7bedd38a342344eb06d5bff5dd6ae43.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ---------------- | ---------------- | ------------------------------------ | --------------- | | `.Checkbox` | `--checked` | | | | `.CheckboxLabel` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | | `.CheckboxInput` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | ### Dropdown ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesDropdown@2x.d635e032d2a254d672c11825a2d3d23d.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | --------------- | ---------------- | -------------- | --------------- | | `.Dropdown` | | | | | `.DropdownItem` | `--highlight` | `:active` | | > Die Gestaltung von Dropdown-Menüs ist unter macOS eingeschränkt. Die API für das Erscheinungsbild von Dropdown-Menüs betrifft in erster Linie Windows-Systeme. Unter macOS können Sie System-Dropdown-Menüs (wie beispielsweise die Länderauswahl) aufgrund von Einschränkungen des Betriebssystems nicht mit diesen Regeln gestalten. ### Umschalter ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesSwitch@2x.a263ba8361af937d5228a35d18c63645.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ---------------- | ---------------- | -------------- | --------------- | | `.Switch` | `--active` | `:hover` | | | `.SwitchControl` | | `:hover` | | ### Auswahl ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesPicker@2x.aa78c665be0c7e33a62992c8e7e33014.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | --------------- | -------------------------------------------------- | ----------------------------- | --------------- | | `.PickerItem` | `--selected`, `--highlight`, `--new`, `--disabled` | `:hover`, `:focus`, `:active` | | | `.PickerAction` | | `:hover`, `:focus`, `:active` | | Stellen Sie sicher, dass sich Ihr aktiver `.PickerItem`-Status von den anderen Status unterscheidet. | | | | | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDo@2x.cc709dc96a8e99e6b020f53216d4d585.png) | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDont@2x.b31bc4b51910a6eece59d44fa92c5b4d.png) | | **RICHTIG** Verwenden Sie zur Unterscheidung des aktiven Status, den Ihre Kundin/Ihr Kunde bereits ausgewählt hat, eine auffällige, kontrastreiche Grundfarbe, eine Gewichtung und/oder einen Umriss. | **NEIN** Verwenden Sie für Ihre .PickerItem-Status keine zwei gleich gewichteten Optionen oder kontrastarmen Farben. Das erschwert die Unterscheidung, welcher Status aktiv ist. | ### Menü | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------- | ---------------- | ----------------------------- | --------------- | | `.Menu` | | | | | `.MenuIcon` | `--open` | `:hover` | | | `.MenuAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Accordion | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ---------------- | ---------------- | --------------------------- | --------------- | | `.AccordionItem` | `--selected` | `:hover` , `:focus-visible` | | ### Payment Method Messaging Element | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------------------- | ---------------- | -------------- | --------------- | | `.PaymentMethodMessaging` | | | | ### Optionsfeld-Symbol ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesRadioIcon@2x.25886d6b352ac0a8d003e7e2cd39677d.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ----------------- | ------------------------ | -------------- | --------------- | | `.RadioIcon` | | | | | `.RadioIconOuter` | `--checked`, `--hovered` | | | | `.RadioIconInner` | `--checked`, `--hovered` | | | Sie können die Gesamtgröße des Symbols mit der Eigenschaft `width` für `.RadioIcon` steuern. Sie können die relative Größe von `.RadioIconInner` mit der Eigenschaft `r` (Radius) steuern. `.RadioIconOuter` und `.RadioIconInner` sind SVG-Elemente und können mit `stroke`- und `fill`-Eigenschaften gestaltet werden. Unten finden Sie eine vollständige Liste der [unterstützten CSS-Eigenschaften](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties). ```js const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } }; ``` ### Umschalten ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesToggleItem@2x.88891aff38f391f7c792a4bfeb8ad026.png) | Klassenname | US-Bundesstaaten | Pseudo-Klassen | Pseudo-Elemente | | ------------- | ---------------- | ------------------------------------------ | --------------- | | `.ToggleItem` | `--selected` | `:active`, `:hover`, `:focus`, `:disabled` | | ### Unterstützte CSS-Eigenschaften | CSS-Eigenschaft | Unterstützte Klassen | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-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` | Einige Ausnahmen zu den obigen Eigenschaften sind: - `-webkit-text-fill-color` ist nicht kompatibel mit Pseudo-Klassen ## Weitere Konfigurationsoptionen Zusätzlich zu den `Themen`, `Labels`, `Eingaben`, `Variablen` und `Regeln` können Sie Elemente mithilfe weiterer Optionen zur Erscheinungskonfiguration gestalten. Sie können die Optionen anpassen, indem Sie sie dem Appearance-Objekt hinzufügen: ```js const appearance = { disableAnimations: true, // other configurations such as `theme`, `labels`, `inputs`, `variables` and `rules`... } ``` Aktuell unterstützen wir folgende Optionen: | Konfiguration | Beschreibung | | ------------------- | ---------------------------------------------------------------------------------- | | `disableAnimations` | Deaktiviert Animationen in der Nutzeroberfläche. Boolescher Standardwert: `false`. |