# Card fields style guide (/limited-release/commerce-platform/accept-payments/advanced/customize/card-fields-style-guide)



Change the layout, width, height, and outer styling of the card fields. Modify the elements you supply as containers with your current stylesheets. For example, `input: { border: 1px solid #333; }`.

> **Tip:** **Important:** This JavaScript SDK documentation uses the `CardFields` component. If you are integrated with the legacy `HostedFields` component, see [Hosted felds style guide](/expanded/card-field-styling/).

## Supported CSS properties [#supported-css-properties]

The CSS properties listed are the only properties supported in the advanced credit and debit card payments configuration. If you specify an unsupported CSS property, a warning is logged to the browser console.

* `appearance`
* `color`
* `direction`
* `font`
* `font-family`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-weight`
* `letter-spacing`
* `line-height`
* `opacity`
* `outline`
* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`
* `text-shadow`
* `transition`
* `-moz-appearance`
* `-moz-osx-font-smoothing`
* `-moz-tap-highlight-color`
* `-moz-transition`
* `-webkit-appearance`
* `-webkit-osx-font-smoothing`
* `-webkit-tap-highlight-color`
* `-webkit-transition`

## Examples [#examples]

You can pass a style object into a parent `cardField` component or each card field individually.

**Style parent fields**

Pass a style object to the parent `cardField` component to apply the object to every field.

```text lineNumbers
const cardStyle = {
          'input': {
              'font-size': '16px',
              'font-family': 'courier, monospace',
              'font-weight': 'lighter',
              'color': '#ccc',
          },
          '.invalid': {
              'color': 'purple',
          },
      };
      const cardField = paypal.CardFields({
          style: cardStyle
      });
```

**Style individual fields**

Pass a style object to an individual card field to apply the object to that field only. This overrides any object passed through a parent component.

```text lineNumbers
const nameFieldStyle = {
          'input': {
              'color': 'blue'
          }
          '.invalid': {
              'color': 'purple'
          },
      };
      const nameField = cardField.NameField({
          style: nameFieldStyle
      }).render('#card-name-field-container');
```

## See also [#see-also]

> **Info:** * [Card field properties](/expanded/card-field-properties)
> * [JavaScript SDK reference](/sdk/js/reference/)