[@bigcommerce/checkout-sdk](../README.md) › [StripeElementStyleVariant](stripeelementstylevariant.md)

# Interface: StripeElementStyleVariant

## Hierarchy

* [StripeElementCSSProperties](stripeelementcssproperties.md)

  ↳ **StripeElementStyleVariant**

## Index

### Properties

* [:-webkit-autofill](stripeelementstylevariant.md#optional-:-webkit-autofill)
* [::-ms-clear](stripeelementstylevariant.md#optional-::-ms-clear)
* [::placeholder](stripeelementstylevariant.md#optional-::placeholder)
* [::selection](stripeelementstylevariant.md#optional-::selection)
* [:disabled](stripeelementstylevariant.md#optional-:disabled)
* [:focus](stripeelementstylevariant.md#optional-:focus)
* [:hover](stripeelementstylevariant.md#optional-:hover)
* [backgroundColor](stripeelementstylevariant.md#optional-backgroundcolor)
* [color](stripeelementstylevariant.md#optional-color)
* [fontFamily](stripeelementstylevariant.md#optional-fontfamily)
* [fontSize](stripeelementstylevariant.md#optional-fontsize)
* [fontSmoothing](stripeelementstylevariant.md#optional-fontsmoothing)
* [fontStyle](stripeelementstylevariant.md#optional-fontstyle)
* [fontVariant](stripeelementstylevariant.md#optional-fontvariant)
* [fontWeight](stripeelementstylevariant.md#optional-fontweight)
* [iconColor](stripeelementstylevariant.md#optional-iconcolor)
* [letterSpacing](stripeelementstylevariant.md#optional-letterspacing)
* [lineHeight](stripeelementstylevariant.md#optional-lineheight)
* [padding](stripeelementstylevariant.md#optional-padding)
* [textAlign](stripeelementstylevariant.md#optional-textalign)
* [textDecoration](stripeelementstylevariant.md#optional-textdecoration)
* [textShadow](stripeelementstylevariant.md#optional-textshadow)
* [textTransform](stripeelementstylevariant.md#optional-texttransform)

## Properties

### `Optional` :-webkit-autofill

• **:-webkit-autofill**? : *[StripeElementCSSProperties](stripeelementcssproperties.md)*

___

### `Optional` ::-ms-clear

• **::-ms-clear**? : *[StripeElementCSSProperties](stripeelementcssproperties.md) & object*

Available for the `cardNumber`, `cardExpiry`, and `cardCvc` elements.

___

### `Optional` ::placeholder

• **::placeholder**? : *[StripeElementCSSProperties](stripeelementcssproperties.md)*

___

### `Optional` ::selection

• **::selection**? : *[StripeElementCSSProperties](stripeelementcssproperties.md)*

___

### `Optional` :disabled

• **:disabled**? : *[StripeElementCSSProperties](stripeelementcssproperties.md)*

Available for all elements except the `paymentRequestButton` element

___

### `Optional` :focus

• **:focus**? : *[StripeElementCSSProperties](stripeelementcssproperties.md)*

___

### `Optional` :hover

• **:hover**? : *[StripeElementCSSProperties](stripeelementcssproperties.md)*

___

### `Optional` backgroundColor

• **backgroundColor**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[backgroundColor](stripeelementcssproperties.md#optional-backgroundcolor)*

The [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) CSS property.

This property works best with the `::selection` pseudo-class.
In other cases, consider setting the background color on the element's container instaed.

___

### `Optional` color

• **color**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[color](stripeelementcssproperties.md#optional-color)*

The [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.

___

### `Optional` fontFamily

• **fontFamily**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[fontFamily](stripeelementcssproperties.md#optional-fontfamily)*

The [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) CSS property.

___

### `Optional` fontSize

• **fontSize**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[fontSize](stripeelementcssproperties.md#optional-fontsize)*

The [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) CSS property.

___

### `Optional` fontSmoothing

• **fontSmoothing**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[fontSmoothing](stripeelementcssproperties.md#optional-fontsmoothing)*

The [font-smoothing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smoothing) CSS property.

___

### `Optional` fontStyle

• **fontStyle**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[fontStyle](stripeelementcssproperties.md#optional-fontstyle)*

The [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) CSS property.

___

### `Optional` fontVariant

• **fontVariant**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[fontVariant](stripeelementcssproperties.md#optional-fontvariant)*

The [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) CSS property.

___

### `Optional` fontWeight

• **fontWeight**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[fontWeight](stripeelementcssproperties.md#optional-fontweight)*

The [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) CSS property.

___

### `Optional` iconColor

• **iconColor**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[iconColor](stripeelementcssproperties.md#optional-iconcolor)*

A custom property, used to set the color of the icons that are rendered in an element.

___

### `Optional` letterSpacing

• **letterSpacing**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[letterSpacing](stripeelementcssproperties.md#optional-letterspacing)*

The [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) CSS property.

___

### `Optional` lineHeight

• **lineHeight**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[lineHeight](stripeelementcssproperties.md#optional-lineheight)*

The [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) CSS property.

To avoid cursors being rendered inconsistently across browsers, consider using a padding on the element's container instead.

___

### `Optional` padding

• **padding**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[padding](stripeelementcssproperties.md#optional-padding)*

The [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) CSS property.

Available for the `idealBank` element.
Accepts integer `px` values.

___

### `Optional` textAlign

• **textAlign**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[textAlign](stripeelementcssproperties.md#optional-textalign)*

The [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) CSS property.

Available for the `cardNumber`, `cardExpiry`, and `cardCvc` elements.

___

### `Optional` textDecoration

• **textDecoration**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[textDecoration](stripeelementcssproperties.md#optional-textdecoration)*

The [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) CSS property.

___

### `Optional` textShadow

• **textShadow**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[textShadow](stripeelementcssproperties.md#optional-textshadow)*

The [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) CSS property.

___

### `Optional` textTransform

• **textTransform**? : *undefined | string*

*Inherited from [StripeElementCSSProperties](stripeelementcssproperties.md).[textTransform](stripeelementcssproperties.md#optional-texttransform)*

The [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) CSS property.