[**@bigcommerce/checkout-sdk**](../README.md)

***

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

# Interface: StripeElementStyleVariant

CSS properties supported by Stripe.js.

## Extends

- [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

## Properties

### :-webkit-autofill?

> `optional` **:-webkit-autofill?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

***

### ::-ms-clear?

> `optional` **::-ms-clear?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md) & `object`

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

#### Type Declaration

##### display

> **display**: `string`

***

### ::placeholder?

> `optional` **::placeholder?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

***

### ::selection?

> `optional` **::selection?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

***

### :disabled?

> `optional` **:disabled?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

Available for all elements except the `paymentRequestButton` element

***

### :focus?

> `optional` **:focus?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

***

### :hover?

> `optional` **:hover?**: [`StripeElementCSSProperties`](StripeElementCSSProperties.md)

***

### backgroundColor?

> `optional` **backgroundColor?**: `string`

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.

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`backgroundColor`](StripeElementCSSProperties.md#backgroundcolor)

***

### color?

> `optional` **color?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`color`](StripeElementCSSProperties.md#color)

***

### fontFamily?

> `optional` **fontFamily?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`fontFamily`](StripeElementCSSProperties.md#fontfamily)

***

### fontSize?

> `optional` **fontSize?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`fontSize`](StripeElementCSSProperties.md#fontsize)

***

### fontSmoothing?

> `optional` **fontSmoothing?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`fontSmoothing`](StripeElementCSSProperties.md#fontsmoothing)

***

### fontStyle?

> `optional` **fontStyle?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`fontStyle`](StripeElementCSSProperties.md#fontstyle)

***

### fontVariant?

> `optional` **fontVariant?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`fontVariant`](StripeElementCSSProperties.md#fontvariant)

***

### fontWeight?

> `optional` **fontWeight?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`fontWeight`](StripeElementCSSProperties.md#fontweight)

***

### iconColor?

> `optional` **iconColor?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`iconColor`](StripeElementCSSProperties.md#iconcolor)

***

### letterSpacing?

> `optional` **letterSpacing?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`letterSpacing`](StripeElementCSSProperties.md#letterspacing)

***

### lineHeight?

> `optional` **lineHeight?**: `string`

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.

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`lineHeight`](StripeElementCSSProperties.md#lineheight)

***

### padding?

> `optional` **padding?**: `string`

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

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`padding`](StripeElementCSSProperties.md#padding)

***

### textAlign?

> `optional` **textAlign?**: `string`

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

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`textAlign`](StripeElementCSSProperties.md#textalign)

***

### textDecoration?

> `optional` **textDecoration?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`textDecoration`](StripeElementCSSProperties.md#textdecoration)

***

### textShadow?

> `optional` **textShadow?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`textShadow`](StripeElementCSSProperties.md#textshadow)

***

### textTransform?

> `optional` **textTransform?**: `string`

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

#### Inherited from

[`StripeElementCSSProperties`](StripeElementCSSProperties.md).[`textTransform`](StripeElementCSSProperties.md#texttransform)