# API Elements Appearance Personnalisez l'apparence des Element pour qu'ils s'intègrent parfaitement à votre site. Stripe Elements prend en charge la personnalisation visuelle, ce qui vous permet de respecter le design de votre site grâce à l’option `appearance`. La disposition de chaque Element reste la même, mais vous pouvez modifier les couleurs, les polices, les bordures, les marges intérieures et bien plus encore. 1. Sélectionnez un [thème](https://docs.stripe.com/elements/appearance-api.md#theme) prédéfini qui s’accorde le mieux à votre site Web. 1. Personnalisez le thème à l’aide des [entrées et étiquettes](https://docs.stripe.com/elements/appearance-api.md#inputs-and-labels). Vous pouvez également définir certaines [variables](https://docs.stripe.com/elements/appearance-api.md#variables), telles que `fontFamily` et `colorPrimary` afin de personnaliser de manière générale les composants apparaissant dans chaque Élément. 1. Si nécessaire, ajustez les composants et les états individuels à l’aide de [règles](https://docs.stripe.com/elements/appearance-api.md#rules). Pour un contrôle complet, spécifiez des propriétés CSS personnalisées pour les composants individuels figurant dans l’Element. > L’API Elements Appearance ne prend pas en charge les Elements de moyens de paiement individuels (par exemple, `CardElement`). À la place, utilisez l’objet [Style](https://docs.stripe.com/js/appendix/style) pour personnaliser votre Element. # API Checkout Sessions > This is a API Checkout Sessions for when api-integration is checkout. View the full page at https://docs.stripe.com/elements/appearance-api?api-integration=checkout. ## Thèmes Commencez à personnaliser des éléments Checkout en sélectionnant l’un des thèmes suivants : - `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 ``` ## Entrées et étiquettes Personnalisez l’aspect des champs de saisie et des étiquettes qui leur sont associées. `const appearance = { inputs: 'spaced', labels: 'auto' }` ### Entrées Choisissez le style des champs de saisie correspondant à votre conception. | Variante | Description | | ----------- | ------------------------------------------------------------------------------------------- | | `spaced` | Chaque champ de saisie dispose d’un espace autour de lui. Il s’agit de l’option par défaut. | | `condensed` | Les champs de saisie associés sont groupés sans espace entre eux. | ### Étiquettes Contrôlez la position et la visibilité des étiquettes associées aux champs de saisie. | Variante | Description | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `auto` | Les étiquettes s’ajustent en fonction de la variante de saisie. Lorsque les entrées sont `spaced`, les étiquettes sont `above`. Lorsque les entrées sont `condensed`, les étiquettes sont `floating`. Il s’agit de l’option par défaut. | | `above` | Les étiquettes sont placées au-dessus des champs de saisie correspondants. | | `floating` | Les étiquettes flottent dans les champs de saisie. | ## Variables Définissez des variables pour influencer l’apparence de nombreux composants présents dans chaque élément Checkout. ![Formulaire de paiement avec champs de saisie de carte, icônes des principales de carte de crédit et option de paiement Klarna, avec variables de l'API Appearance étiquetées pour les couleurs et le style.](https://b.stripecdn.com/docs-statics-srv/assets/exampleVariables@2x.8c50d1561d5d4fbb1ac0187983ab33c0.png) L’option `variables` fonctionne comme des [variables CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Vous pouvez définir des valeurs CSS pour chaque variable et référencer d’autres variables d’apparence à l’aide de la syntaxe `var(--myVariable)`. Vous pouvez également inspecter le DOM généré à l’aide de l’explorateur DOM de votre navigateur. > Les variables `colorPrimary`, `colorBackground`, `colorText`, `colorSuccess`, `colorDanger` et `colorWarning` ne prennent pas en charge la fonction `rgba()` ni la syntaxe `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 ``` ### Variables fréquemment utilisées | Variable | Description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fontFamily` | La famille de polices utilisée dans l’ensemble de l’interface utilisateur. Les éléments Checkout prennent en charge les polices personnalisées en transmettant l’option `fonts` à [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-fonts) ou [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-fonts). | | `fontSizeBase` | La taille de police définie à la racine de l’interface utilisateur. Par défaut, les autres variables de taille de police, telles que `fontSizeXs` ou `fontSizeSm` sont mises à l’échelle à partir de cette valeur à l’aide d’unités `rem`. Veillez à choisir une taille de police d’au moins 16 px pour les champs de saisie sur mobile. | | `spacingUnit` | Unité d’espacement de base à partir de laquelle tous les autres espacements sont dérivés. Augmentez ou diminuez cette valeur pour rendre votre mise en page plus ou moins aérée. | | `borderRadius` | Le rayon de bordure utilisé pour les onglets, les champs de saisie et les autres composants. | | `colorPrimary` | Une couleur principale utilisée dans l’ensemble de l’interface utilisateur. Définissez-la sur la couleur principale de votre marque. | | `colorBackground` | La couleur utilisée pour l’arrière-plan des champs de saisie, des onglets et des autres composants. | | `colorText` | La couleur de texte par défaut utilisée. | | `colorDanger` | Une couleur utilisée pour indiquer des erreurs ou des actions destructrices. | ### Variables rarement utilisées | Variable | Description | | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `buttonBorderRadius` | Rayon de bordure utilisé pour les boutons. Par défaut, les boutons utilisent `borderRadius`. | | `buttonColorBackground` | Couleur utilisée pour l’arrière-plan des boutons. Par défaut, les boutons utilisent `colorPrimary`. | | `buttonColorText` | Couleur de texte utilisée pour les boutons. Par défaut, les boutons utilisent `accessibleColorOnColorPrimary`. | | `focusBoxShadow` | Le `box-shadow` utilisé pour les composants ciblés. | | `focusOutline` | L’`outline` utilisé pour les composants ciblés. | | `fontSmooth` | Paramètre d’anti-crénelage du texte à utiliser. Il peut être `always`, `auto` ou `never`. | | `fontVariantLigatures` | Le paramètre [font-variant-ligatures](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) appliqué au texte. | | `fontVariationSettings` | Le paramètre [font-variation-settings](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) du texte. | | `fontWeightLight` | Graisse de la police utilisée pour le texte clair. | | `fontWeightNormal` | Graisse de la police utilisée pour le contenu texte standard. | | `fontWeightMedium` | Graisse de la police utilisée pour le texte de taille moyenne. | | `fontWeightBold` | Graisse de la police utilisée pour le texte en gras. | | `fontLineHeight` | Le paramètre [line-height](http://developer.mozilla.org/en-US/docs/Web/CSS/line-height) du texte. | | `fontSize2Xl` | La taille de police du texte très très grand (XXL). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeXl` | La taille de police du texte très grand (XL). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeLg` | La taille de police du texte grand (L). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeSm` | La taille de police du texte petit (S). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeXs` | La taille de police du texte très petit (XS). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSize2Xs` | La taille de police du texte très très petit (XXS). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSize3Xs` | La taille de police du texte extrêmement petit (XXXS). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `logoColor` | Variante du logo à afficher par défaut : soit `light`, soit `dark`. | | `tabLogoColor` | Variante du logo à afficher dans les composants `.Tab` : soit `light`, soit `dark`. | | `tabLogoSelectedColor` | Variante du logo à afficher dans le composant `.Tab--selected` : soit `light`, soit `dark`. | | `blockLogoColor` | Variante du logo à afficher dans les composants `.Block` : soit `light`, soit `dark`. | | `colorSuccess` | Une couleur utilisée pour indiquer des actions positives ou des résultats réussis. | | `colorWarning` | Une couleur utilisée pour indiquer des actions potentiellement destructrices. | | `accessibleColorOnColorPrimary` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorPrimary)`. | | `accessibleColorOnColorBackground` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorBackground)`. | | `accessibleColorOnColorSuccess` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorSuccess)`. | | `accessibleColorOnColorDanger` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorDanger)`. | | `accessibleColorOnColorWarning` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorWarning)`. | | `colorTextSecondary` | Couleur utilisée pour le texte d’importance secondaire. Par exemple, cette couleur est utilisée pour le libellé d’un onglet qui n’est pas actuellement sélectionné. | | `colorTextPlaceholder` | La couleur utilisée pour le texte de substitution. | | `iconColor` | La couleur par défaut utilisée pour les icônes, par exemple l’icône affichée dans l’onglet de carte bancaire. | | `iconHoverColor` | Couleur des icônes survolées. | | `iconCardErrorColor` | La couleur de l’icône de carte lorsqu’elle indique un état d’erreur. | | `iconCardCvcColor` | La couleur de la variante CVC de l’icône de carte. | | `iconCardCvcErrorColor` | La couleur de la variante CVC de l’icône de carte lorsque la saisie du champ CVC est invalide. | | `iconCheckmarkColor` | Couleur des coches affichées dans des composants comme `.Checkbox`. | | `iconChevronDownColor` | La couleur des icônes de flèches affichées dans les entrées à sélectionner. | | `iconChevronDownHoverColor` | Couleur des icônes de flèche lorsqu’elles sont survolées. | | `iconCloseColor` | Couleur des icônes de fermeture, utilisées pour indiquer le rejet ou la clôture d’une action. | | `iconCloseHoverColor` | Couleur des icônes de fermeture lorsqu’elles sont survolées. | | `iconLoadingIndicatorColor` | Couleur de l’indicateur d’attente dans les indicateurs de chargement. | | `iconMenuColor` | Couleur des icônes de menu utilisées pour signaler un ensemble d’actions supplémentaires. | | `iconMenuHoverColor` | Couleur des icônes de menu lorsqu’elles sont survolées. | | `iconMenuOpenColor` | Couleur des icônes de menu lorsqu’elles sont ouvertes. | | `iconPasscodeDeviceColor` | Couleur de l’icône du dispositif de mot de passe, utilisée pour indiquer qu’un message a été envoyé sur l’appareil mobile de l’utilisateur. | | `iconPasscodeDeviceHoverColor` | Couleur de l’icône du dispositif de mot de passe lorsqu’elle est survolée. | | `iconPasscodeDeviceNotificationColor` | Couleur de l’indicateur de notification affiché au-dessus de l’icône du dispositif de mot de passe. | | `iconRedirectColor` | La couleur de l’icône de redirection qui apparaît pour les moyens de paiement avec redirection. | | `tabIconColor` | La couleur des icônes qui apparaissent dans un onglet. | | `tabIconHoverColor` | La couleur des icônes qui apparaissent dans un onglet lorsque cet onglet est survolé. | | `tabIconSelectedColor` | La couleur des icônes qui apparaissent dans un onglet lorsque celui-ci est sélectionné. | | `tabIconMoreColor` | La couleur de l’icône qui apparaît dans le déclencheur pour le menu des moyens de paiement supplémentaires. | | `tabIconMoreHoverColor` | La couleur de l’icône qui apparaît dans le déclencheur pour le menu des moyens de paiement supplémentaires lorsque ce déclencheur est survolé. | | `accordionItemSpacing` | Espacement vertical entre les composants `.AccordionItem`. S’applique uniquement lorsque la valeur de [spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) est `true`. | | `gridColumnSpacing` | L’espacement entre les colonnes de la grille utilisée pour la mise en page de l’interface utilisateur. | | `gridRowSpacing` | L’espacement entre les lignes de la grille utilisée pour la mise en page de l’interface utilisateur. | | `pickerItemSpacing` | Espacement entre les composants `.PickerItem` affichés dans le composant `.Picker`. | | `tabSpacing` | Espacement horizontal entre les composants `.Tab`. | ## Règles L’option `rules` fournit un mappage de sélecteurs CSS vers des propriétés CSS, offrant une personnalisation avancée des composants. Une fois votre `theme` et vos `variables` définis, les `rules` permettent d’intégrer l’interface utilisateur afin qu’elle corresponde parfaitement au design de votre site. #### 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 ``` ### Toutes les règles Le sélecteur d’une règle peut viser n’importe quel nom de classe public de l’interface utilisateur, ainsi que les états, pseudo-classes et pseudo-éléments pris en charge pour chaque classe. Par exemple, les sélecteurs suivants sont considérés comme valides : - `.Tab, .Label, .Input` - `.Tab:focus` - `.Input--invalid, .Label--invalid` - `.Input::placeholder` Les sélecteurs suivants ne sont **pas** valides : - `.p-SomePrivateClass, img`, seuls les noms de classes publiques peuvent être ciblés - `.Tab .TabLabel`, les relations parent-enfant des sélecteurs ne sont pas prises en charge - `.Tab--invalid`, la classe `.Tab` ne prend pas en charge l’état `--invalid` Chaque nom de classe utilisé dans un sélecteur [prend en charge une liste des propriétés CSS autorisées](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties), que vous spécifiez à l’aide de la notation camel case (par exemple, `boxShadow` pour la propriété [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)). Voici la liste complète des noms de classes pris en charge et des états, pseudo-classes et pseudo-éléments correspondants. ### Onglets ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesTabs@2x.9c36db7ee4c98d7b2d6f00e91e6d4f20.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ------------ | ------------------------------------------ | --------------- | | `.Tab` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabIcon` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabLabel` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | ### Entrées (au-dessus des étiquettes) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputs@2x.4ed082ee74fcbad043a80e2d4b133b35.png) Assurez-vous de choisir une taille de police d’au moins 16 px pour les champs de saisie sur mobile. | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ----------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Entrées (étiquettes flottantes) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputsFloating@2x.daec4a823ac24cc86d94a44664104eb8.png) > Vous pouvez activer les étiquettes flottantes en tant qu’[option de configuration supplémentaire](https://docs.stripe.com/elements/appearance-api.md#others). | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | -------------------------------------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused`, `--floating`, `--resting` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Bloquer ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesBlock@2x.556532f7e919aaf1d775ceb0253f5c22.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | --------------- | ------------ | ----------------------------- | --------------- | | `.Block` | | | | | `.BlockDivider` | | | | | `.BlockAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Saisie de code ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCodeInput@2x.64975e4945d393068a2f207a2d48f25c.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ----- | ------------------------------- | --------------- | | `.CodeInput` | | `:hover`, `:focus`, `:disabled` | | ### Checkbox ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCheckbox@2x.d7bedd38a342344eb06d5bff5dd6ae43.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ---------------- | ----------- | ------------------------------------ | --------------- | | `.Checkbox` | `--checked` | | | | `.CheckboxLabel` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | | `.CheckboxInput` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | ### Liste déroulante ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesDropdown@2x.d635e032d2a254d672c11825a2d3d23d.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | --------------- | ------------- | -------------- | --------------- | | `.Dropdown` | | | | | `.DropdownItem` | `--highlight` | `:active` | | > Le style des menus déroulants est limité sur macOS. L’API d’apparence des menus déroulants affecte principalement les systèmes Windows. Sur macOS, vous ne pouvez pas styliser les menus déroulants du système, tels que le sélecteur de pays à l’aide de ces règles en raison des restrictions du système d’exploitation. ### Bouton bascule ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesSwitch@2x.a263ba8361af937d5228a35d18c63645.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ---------------- | ---------- | -------------- | --------------- | | `.Switch` | `--active` | `:hover` | | | `.SwitchControl` | | `:hover` | | ### Sélecteur ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesPicker@2x.aa78c665be0c7e33a62992c8e7e33014.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | --------------- | -------------------------------------------------- | ----------------------------- | --------------- | | `.PickerItem` | `--selected`, `--highlight`, `--new`, `--disabled` | `:hover`, `:focus`, `:active` | | | `.PickerAction` | | `:hover`, `:focus`, `:active` | | Assurez-vous que votre état `.PickerItem` actif se démarque des autres états. | | | | | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDo@2x.cc709dc96a8e99e6b020f53216d4d585.png) | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDont@2x.b31bc4b51910a6eece59d44fa92c5b4d.png) | | **À FAIRE** Utilisez une couleur primaire, une graisse et/ou un contour visibles et très contrastés pour distinguer l’état actif que votre client a déjà sélectionné. | **À NE PAS FAIRE** N’utilisez pas deux options de même graisse ni des couleurs peu contrastées pour vos états .PickerItem, car il serait plus difficile de distinguer lequel est actif. | ### Menu | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ------------ | ----------------------------- | --------------- | | `.Menu` | | | | | `.MenuIcon` | `--open` | `:hover` | | | `.MenuAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Accordéon | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ---------------- | ------------ | -------------------------- | --------------- | | `.AccordionItem` | `--selected` | `:hover`, `:focus-visible` | | ### Payment Method Messaging Element | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------------------- | ----- | -------------- | --------------- | | `.PaymentMethodMessaging` | | | | ### Icône radio ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesRadioIcon@2x.25886d6b352ac0a8d003e7e2cd39677d.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ----------------- | ------------------------ | -------------- | --------------- | | `.RadioIcon` | | | | | `.RadioIconOuter` | `--checked`, `--hovered` | | | | `.RadioIconInner` | `--checked`, `--hovered` | | | Vous pouvez contrôler la taille globale de l’icône avec la propriété `width` sur `.RadioIcon`. Pour contrôler la taille relative de `.RadioIconInner`, utilisez la propriété `r` (radius).`.RadioIconOuter` et`.RadioIconInner` sont des éléments SVG, qui peuvent être stylisés à l’aide des propriétés `stroke` et `fill`. Consultez la liste complète des [propriétés CSS prises en charge](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties) ci-dessous. ```js const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } }; ``` ### Afficher/masquer ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesToggleItem@2x.88891aff38f391f7c792a4bfeb8ad026.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ------------ | ------------------------------------------ | --------------- | | `.ToggleItem` | `--selected` | `:active`, `:hover`, `:focus`, `:disabled` | | ### Propriétés CSS prises en charge | Propriété CSS | Classes prises en charge | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-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` | Voici quelques exceptions aux propriétés ci-dessus : - `-webkit-text-fill-color` n’est pas compatible avec les pseudo-classes ## Autres options de configuration En plus des `themes`, `labels`, `inputs`, `variables` et `rules`, vous pouvez styliser les Éléments à l’aide d’autres options de configuration de l’aspect. Vous pouvez les personnaliser en les ajoutant à l’objet Appearance : ```js const appearance = { disableAnimations: true, // other configurations such as `theme`, `labels`, `inputs`, `variables` and `rules`... } ``` À l’heure actuelle, nous prenons en charge les options suivantes : | Configuration | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | `disableAnimations` | Désactive les animations dans l’ensemble de l’interface utilisateur. Valeur booléenne, par défaut elle est définie sur `false`. | # API Payment Intents > This is a API Payment Intents for when api-integration is paymentintents. View the full page at https://docs.stripe.com/elements/appearance-api?api-integration=paymentintents. ## Thèmes Commencez à personnaliser des Elements en sélectionnant l’un des thèmes suivants : - `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 ``` ## Entrées et étiquettes Personnalisez l’aspect des champs de saisie et des étiquettes qui leur sont associées. `const appearance = { inputs: 'spaced', labels: 'auto' }` ### Entrées Choisissez le style des champs de saisie correspondant à votre conception. | Variante | Description | | ----------- | ------------------------------------------------------------------------------------------- | | `spaced` | Chaque champ de saisie dispose d’un espace autour de lui. Il s’agit de l’option par défaut. | | `condensed` | Les champs de saisie associés sont groupés sans espace entre eux. | ### Étiquettes Contrôlez la position et la visibilité des étiquettes associées aux champs de saisie. | Variante | Description | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `auto` | Les étiquettes s’ajustent en fonction de la variante de saisie. Lorsque les entrées sont `spaced`, les étiquettes sont `above`. Lorsque les entrées sont `condensed`, les étiquettes sont `floating`. Il s’agit de l’option par défaut. | | `above` | Les étiquettes sont placées au-dessus des champs de saisie correspondants. | | `floating` | Les étiquettes flottent dans les champs de saisie. | ## Variables Définissez des variables pour personnaliser l’apparence de nombreux composants apparaissant dans chaque Element. ![Formulaire de paiement avec champs de saisie de carte, icônes des principales de carte de crédit et option de paiement Klarna, avec variables de l'API Appearance étiquetées pour les couleurs et le style.](https://b.stripecdn.com/docs-statics-srv/assets/exampleVariables@2x.8c50d1561d5d4fbb1ac0187983ab33c0.png) L’option `variables` fonctionne comme des [variables CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Vous pouvez définir des valeurs CSS pour chaque variable et référencer d’autres variables d’apparence à l’aide de la syntaxe `var(--myVariable)`. Vous pouvez également inspecter le DOM généré à l’aide de l’explorateur DOM de votre navigateur. > Les variables `colorPrimary`, `colorBackground`, `colorText`, `colorSuccess`, `colorDanger` et `colorWarning` ne prennent pas en charge la fonction `rgba()` ni la syntaxe `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 ``` ### Variables fréquemment utilisées | Variable | Description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fontFamily` | La famille de polices utilisée dans l’ensemble de l’interface utilisateur. Elements prend en charge les polices personnalisées en transmettant l’option `fonts` au groupe [Elements](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-fonts). | | `fontSizeBase` | La taille de police définie à la racine de l’interface utilisateur. Par défaut, les autres variables de taille de police, telles que `fontSizeXs` ou `fontSizeSm` sont mises à l’échelle à partir de cette valeur à l’aide d’unités `rem`. Veillez à choisir une taille de police d’au moins 16 px pour les champs de saisie sur mobile. | | `spacingUnit` | Unité d’espacement de base à partir de laquelle tous les autres espacements sont dérivés. Augmentez ou diminuez cette valeur pour rendre votre mise en page plus ou moins aérée. | | `borderRadius` | Le rayon de bordure utilisé pour les onglets, les champs de saisie et les autres composants. | | `colorPrimary` | Une couleur principale utilisée dans l’ensemble de l’interface utilisateur. Définissez-la sur la couleur principale de votre marque. | | `colorBackground` | La couleur utilisée pour l’arrière-plan des champs de saisie, des onglets et des autres composants. | | `colorText` | La couleur de texte par défaut utilisée. | | `colorDanger` | Une couleur utilisée pour indiquer des erreurs ou des actions destructrices. | ### Variables rarement utilisées | Variable | Description | | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `buttonBorderRadius` | Rayon de bordure utilisé pour les boutons. Par défaut, les boutons utilisent `borderRadius`. | | `buttonColorBackground` | Couleur utilisée pour l’arrière-plan des boutons. Par défaut, les boutons utilisent `colorPrimary`. | | `buttonColorText` | Couleur de texte utilisée pour les boutons. Par défaut, les boutons utilisent `accessibleColorOnColorPrimary`. | | `focusBoxShadow` | Le `box-shadow` utilisé pour les composants ciblés. | | `focusOutline` | L’`outline` utilisé pour les composants ciblés. | | `fontSmooth` | Paramètre d’anti-crénelage du texte à utiliser. Il peut être `always`, `auto` ou `never`. | | `fontVariantLigatures` | Le paramètre [font-variant-ligatures](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) appliqué au texte. | | `fontVariationSettings` | Le paramètre [font-variation-settings](http://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) du texte. | | `fontWeightLight` | Graisse de la police utilisée pour le texte clair. | | `fontWeightNormal` | Graisse de la police utilisée pour le contenu texte standard. | | `fontWeightMedium` | Graisse de la police utilisée pour le texte de taille moyenne. | | `fontWeightBold` | Graisse de la police utilisée pour le texte en gras. | | `fontLineHeight` | Le paramètre [line-height](http://developer.mozilla.org/en-US/docs/Web/CSS/line-height) du texte. | | `fontSize2Xl` | La taille de police du texte très très grand (XXL). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeXl` | La taille de police du texte très grand (XL). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeLg` | La taille de police du texte grand (L). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeSm` | La taille de police du texte petit (S). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSizeXs` | La taille de police du texte très petit (XS). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSize2Xs` | La taille de police du texte très très petit (XXS). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `fontSize3Xs` | La taille de police du texte extrêmement petit (XXXS). Par défaut, elle est mise à l’échelle à partir de `var(--fontSizeBase)` en utilisant des unités `rem`. | | `logoColor` | Variante du logo à afficher par défaut : soit `light`, soit `dark`. | | `tabLogoColor` | Variante du logo à afficher dans les composants `.Tab` : soit `light`, soit `dark`. | | `tabLogoSelectedColor` | Variante du logo à afficher dans le composant `.Tab--selected` : soit `light`, soit `dark`. | | `blockLogoColor` | Variante du logo à afficher dans les composants `.Block` : soit `light`, soit `dark`. | | `colorSuccess` | Une couleur utilisée pour indiquer des actions positives ou des résultats réussis. | | `colorWarning` | Une couleur utilisée pour indiquer des actions potentiellement destructrices. | | `accessibleColorOnColorPrimary` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorPrimary)`. | | `accessibleColorOnColorBackground` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorBackground)`. | | `accessibleColorOnColorSuccess` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorSuccess)`. | | `accessibleColorOnColorDanger` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorDanger)`. | | `accessibleColorOnColorWarning` | Couleur du texte qui apparaît sur un arrière-plan `var(--colorWarning)`. | | `colorTextSecondary` | Couleur utilisée pour le texte d’importance secondaire. Par exemple, cette couleur est utilisée pour le libellé d’un onglet qui n’est pas actuellement sélectionné. | | `colorTextPlaceholder` | La couleur utilisée pour le texte de substitution. | | `iconColor` | La couleur par défaut utilisée pour les icônes, par exemple l’icône affichée dans l’onglet de carte bancaire. | | `iconHoverColor` | Couleur des icônes survolées. | | `iconCardErrorColor` | La couleur de l’icône de carte lorsqu’elle indique un état d’erreur. | | `iconCardCvcColor` | La couleur de la variante CVC de l’icône de carte. | | `iconCardCvcErrorColor` | La couleur de la variante CVC de l’icône de carte lorsque la saisie du champ CVC est invalide. | | `iconCheckmarkColor` | Couleur des coches affichées dans des composants comme `.Checkbox`. | | `iconChevronDownColor` | La couleur des icônes de flèches affichées dans les entrées à sélectionner. | | `iconChevronDownHoverColor` | Couleur des icônes de flèche lorsqu’elles sont survolées. | | `iconCloseColor` | Couleur des icônes de fermeture, utilisées pour indiquer le rejet ou la clôture d’une action. | | `iconCloseHoverColor` | Couleur des icônes de fermeture lorsqu’elles sont survolées. | | `iconLoadingIndicatorColor` | Couleur de l’indicateur d’attente dans les indicateurs de chargement. | | `iconMenuColor` | Couleur des icônes de menu utilisées pour signaler un ensemble d’actions supplémentaires. | | `iconMenuHoverColor` | Couleur des icônes de menu lorsqu’elles sont survolées. | | `iconMenuOpenColor` | Couleur des icônes de menu lorsqu’elles sont ouvertes. | | `iconPasscodeDeviceColor` | Couleur de l’icône du dispositif de mot de passe, utilisée pour indiquer qu’un message a été envoyé sur l’appareil mobile de l’utilisateur. | | `iconPasscodeDeviceHoverColor` | Couleur de l’icône du dispositif de mot de passe lorsqu’elle est survolée. | | `iconPasscodeDeviceNotificationColor` | Couleur de l’indicateur de notification affiché au-dessus de l’icône du dispositif de mot de passe. | | `iconRedirectColor` | La couleur de l’icône de redirection qui apparaît pour les moyens de paiement avec redirection. | | `tabIconColor` | La couleur des icônes qui apparaissent dans un onglet. | | `tabIconHoverColor` | La couleur des icônes qui apparaissent dans un onglet lorsque cet onglet est survolé. | | `tabIconSelectedColor` | La couleur des icônes qui apparaissent dans un onglet lorsque celui-ci est sélectionné. | | `tabIconMoreColor` | La couleur de l’icône qui apparaît dans le déclencheur pour le menu des moyens de paiement supplémentaires. | | `tabIconMoreHoverColor` | La couleur de l’icône qui apparaît dans le déclencheur pour le menu des moyens de paiement supplémentaires lorsque ce déclencheur est survolé. | | `accordionItemSpacing` | Espacement vertical entre les composants `.AccordionItem`. S’applique uniquement lorsque la valeur de [spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) est `true`. | | `gridColumnSpacing` | L’espacement entre les colonnes de la grille utilisée pour la mise en page de l’interface utilisateur. | | `gridRowSpacing` | L’espacement entre les lignes de la grille utilisée pour la mise en page de l’interface utilisateur. | | `pickerItemSpacing` | Espacement entre les composants `.PickerItem` affichés dans le composant `.Picker`. | | `tabSpacing` | Espacement horizontal entre les composants `.Tab`. | ## Règles L’option `rules` fournit un mappage de sélecteurs CSS vers des propriétés CSS, offrant une personnalisation avancée des composants. Une fois votre `theme` et vos `variables` définis, les `rules` permettent d’intégrer l’interface utilisateur afin qu’elle corresponde parfaitement au design de votre site. #### 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 ``` ### Toutes les règles Le sélecteur d’une règle peut viser n’importe quel nom de classe public de l’interface utilisateur, ainsi que les états, pseudo-classes et pseudo-éléments pris en charge pour chaque classe. Par exemple, les sélecteurs suivants sont considérés comme valides : - `.Tab, .Label, .Input` - `.Tab:focus` - `.Input--invalid, .Label--invalid` - `.Input::placeholder` Les sélecteurs suivants ne sont **pas** valides : - `.p-SomePrivateClass, img`, seuls les noms de classes publiques peuvent être ciblés - `.Tab .TabLabel`, les relations parent-enfant des sélecteurs ne sont pas prises en charge - `.Tab--invalid`, la classe `.Tab` ne prend pas en charge l’état `--invalid` Chaque nom de classe utilisé dans un sélecteur [prend en charge une liste des propriétés CSS autorisées](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties), que vous spécifiez à l’aide de la notation camel case (par exemple, `boxShadow` pour la propriété [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)). Voici la liste complète des noms de classes pris en charge et des états, pseudo-classes et pseudo-éléments correspondants. ### Onglets ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesTabs@2x.9c36db7ee4c98d7b2d6f00e91e6d4f20.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ------------ | ------------------------------------------ | --------------- | | `.Tab` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabIcon` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | | `.TabLabel` | `--selected` | `:hover`, `:focus`, `:active`, `:disabled` | | ### Entrées (au-dessus des étiquettes) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputs@2x.4ed082ee74fcbad043a80e2d4b133b35.png) Assurez-vous de choisir une taille de police d’au moins 16 px pour les champs de saisie sur mobile. | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ----------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Entrées (étiquettes flottantes) ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesFormInputsFloating@2x.daec4a823ac24cc86d94a44664104eb8.png) > Vous pouvez activer les étiquettes flottantes en tant qu’[option de configuration supplémentaire](https://docs.stripe.com/elements/appearance-api.md#others). | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | -------------------------------------------------------------- | -------------------------------------------- | ------------------------------ | | `.Label` | `--empty`, `--invalid`, `--focused`, `--floating`, `--resting` | | | | `.Input` | `--empty`, `--invalid` | `:hover`, `:focus`, `:disabled`, `:autofill` | `::placeholder`, `::selection` | | `.Error` | | | | ### Bloquer ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesBlock@2x.556532f7e919aaf1d775ceb0253f5c22.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | --------------- | ------------ | ----------------------------- | --------------- | | `.Block` | | | | | `.BlockDivider` | | | | | `.BlockAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Saisie de code ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCodeInput@2x.64975e4945d393068a2f207a2d48f25c.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ----- | ------------------------------- | --------------- | | `.CodeInput` | | `:hover`, `:focus`, `:disabled` | | ### Checkbox ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesCheckbox@2x.d7bedd38a342344eb06d5bff5dd6ae43.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ---------------- | ----------- | ------------------------------------ | --------------- | | `.Checkbox` | `--checked` | | | | `.CheckboxLabel` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | | `.CheckboxInput` | `--checked` | `:hover`, `:focus`, `:focus-visible` | | ### Liste déroulante ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesDropdown@2x.d635e032d2a254d672c11825a2d3d23d.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | --------------- | ------------- | -------------- | --------------- | | `.Dropdown` | | | | | `.DropdownItem` | `--highlight` | `:active` | | > Le style des menus déroulants est limité sur macOS. L’API d’apparence des menus déroulants affecte principalement les systèmes Windows. Sur macOS, vous ne pouvez pas styliser les menus déroulants du système, tels que le sélecteur de pays à l’aide de ces règles en raison des restrictions du système d’exploitation. ### Bouton bascule ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesSwitch@2x.a263ba8361af937d5228a35d18c63645.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ---------------- | ---------- | -------------- | --------------- | | `.Switch` | `--active` | `:hover` | | | `.SwitchControl` | | `:hover` | | ### Sélecteur ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesPicker@2x.aa78c665be0c7e33a62992c8e7e33014.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | --------------- | -------------------------------------------------- | ----------------------------- | --------------- | | `.PickerItem` | `--selected`, `--highlight`, `--new`, `--disabled` | `:hover`, `:focus`, `:active` | | | `.PickerAction` | | `:hover`, `:focus`, `:active` | | Assurez-vous que votre état `.PickerItem` actif se démarque des autres états. | | | | | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDo@2x.cc709dc96a8e99e6b020f53216d4d585.png) | ![](https://b.stripecdn.com/docs-statics-srv/assets/uxTipPickerDont@2x.b31bc4b51910a6eece59d44fa92c5b4d.png) | | **À FAIRE** Utilisez une couleur primaire, une graisse et/ou un contour visibles et très contrastés pour distinguer l’état actif que votre client a déjà sélectionné. | **À NE PAS FAIRE** N’utilisez pas deux options de même graisse ni des couleurs peu contrastées pour vos états .PickerItem, car il serait plus difficile de distinguer lequel est actif. | ### Menu | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ------------ | ----------------------------- | --------------- | | `.Menu` | | | | | `.MenuIcon` | `--open` | `:hover` | | | `.MenuAction` | `--negative` | `:hover`, `:focus`, `:active` | | ### Accordéon | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ---------------- | ------------ | -------------------------- | --------------- | | `.AccordionItem` | `--selected` | `:hover`, `:focus-visible` | | ### Payment Method Messaging Element | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------------------- | ----- | -------------- | --------------- | | `.PaymentMethodMessaging` | | | | ### Icône radio ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesRadioIcon@2x.25886d6b352ac0a8d003e7e2cd39677d.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ----------------- | ------------------------ | -------------- | --------------- | | `.RadioIcon` | | | | | `.RadioIconOuter` | `--checked`, `--hovered` | | | | `.RadioIconInner` | `--checked`, `--hovered` | | | Vous pouvez contrôler la taille globale de l’icône avec la propriété `width` sur `.RadioIcon`. Pour contrôler la taille relative de `.RadioIconInner`, utilisez la propriété `r` (radius).`.RadioIconOuter` et`.RadioIconInner` sont des éléments SVG, qui peuvent être stylisés à l’aide des propriétés `stroke` et `fill`. Consultez la liste complète des [propriétés CSS prises en charge](https://docs.stripe.com/elements/appearance-api.md#supported-css-properties) ci-dessous. ```js const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } }; ``` ### Afficher/masquer ![](https://b.stripecdn.com/docs-statics-srv/assets/exampleRulesToggleItem@2x.88891aff38f391f7c792a4bfeb8ad026.png) | Nom de classe | États | Pseudo-classes | Pseudo-éléments | | ------------- | ------------ | ------------------------------------------ | --------------- | | `.ToggleItem` | `--selected` | `:active`, `:hover`, `:focus`, `:disabled` | | ### Propriétés CSS prises en charge | Propriété CSS | Classes prises en charge | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-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` | Voici quelques exceptions aux propriétés ci-dessus : - `-webkit-text-fill-color` n’est pas compatible avec les pseudo-classes ## Autres options de configuration En plus des `themes`, `labels`, `inputs`, `variables` et `rules`, vous pouvez styliser les Éléments à l’aide d’autres options de configuration de l’aspect. Vous pouvez les personnaliser en les ajoutant à l’objet Appearance : ```js const appearance = { disableAnimations: true, // other configurations such as `theme`, `labels`, `inputs`, `variables` and `rules`... } ``` À l’heure actuelle, nous prenons en charge les options suivantes : | Configuration | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | `disableAnimations` | Désactive les animations dans l’ensemble de l’interface utilisateur. Valeur booléenne, par défaut elle est définie sur `false`. |