Styling {#styling-v2}
=====================

`Microform Integration` can be styled to look and behave like any other input field on your site.

General Appearance {#styling-v2_id18AB90TB05Z}
----------------------------------------------

The `<iframe>` element rendered by Microform has an entirely transparent background that completely fills the container you specify. By styling your container to look like your input fields, your customer will be unable to detect any visual difference. You control the appearance using your own stylesheets. With stylesheets, there are no restrictions and you can often re-use existing rules.

Explicitly Setting Container Height {#styling-v2_id18AB90UF0Y4}
---------------------------------------------------------------

Typically, input elements calculate their height from font size and line height (and a few other properties), but `Microform Integration` requires explicit configuration of height. Make sure you style the height of your containers in your stylesheets.

Managed Classes {#styling-v2_id18AB90W0LHS}
-------------------------------------------

In addition to your own container styles, `Microform Integration` automatically applies some classes to the container in response to internal state changes.

| Class                          | Description                                                       |
|:-------------------------------|:------------------------------------------------------------------|
| `.flex-microform`              | Base class added to any element in which a field has been loaded. |
| `.flex-microform-autocomplete` | The field has been filled using an `autocomplete/autofill` event. |
| `.flex-microform-disabled`     | The field has been disabled.                                      |
| `.flex-microform-focused`      | The field has user focus.                                         |
| `.flex-microform-incomplete`   | The field is incomplete and could be valid.                       |
| `.flex-microform-invalid`      | The input card number invalid.                                    |
| `.flex-microform-valid`        | The input card number is valid.                                   |

To make use of these classes, include overrides in your application's stylesheets. You can combine these styles using regular CSS rules. Here is an example of applying CSS transitions in response to input state changes:

```
.flex-microform {
  height: 20px;
  background: #ffffff;
  -webkit-transition: background 200ms;
  transition: background 200ms;
}

/* different styling for a specific container */
#securityCode-container.flex-microform {
  background: purple;
}

.flex-microform-focused {
  background: lightyellow;
}

.flex-microform-valid {
  background: green;
}

.flex-microform-valid.flex-microform-focused {
  background: lightgreen;
}

.flex-microform-autocomplete {
  background: #faffbd;
}
```

Input Field Text {#styling-v2_id18AB90000UI}
--------------------------------------------

To style the text within the iframe element, use the JavaScript library. The `styles` property in the set-up options accepts a CSS-like object that allows customization of the text. Only a subset of the CSS properties is supported.

```
const customStyles = {
  'input': {
    'font-size': '16px',
    'color': '#3A3A3A'
  },
  '::placeholder': {
    'color': 'blue'
  },
  ':focus': {
    'color': 'blue'
  },
  ':hover': {
    'font-style': 'italic'
  },
  ':disabled': {
    'cursor': 'not-allowed',
  },
  'valid': {
    'color': 'green'
  },
  'invalid': {
    'color': 'red'
  }
};

const flex = new Flex('..........');
// apply styles to all fields
const microform = flex.microform({ styles: customStyles });
const securityCode = microform.createField('securityCode');

// override the text color for the card number field
const number = microform.createField('number', { styles: { input: { color: '#000' }}});
```

Supported Properties {#styling-v2_id18AB9A005YK}
------------------------------------------------

These CSS properties are supported in the `styles: { ... }` configuration hash. Unsupported properties are not added to the inner field, and a warning is output to the console.

* `color`
* `cursor`
* `font`
* `font-family`
* `font-kerning`
* `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`
* `line-height`
* `opacity`
* `text-shadow`
* `text-rendering`
* `transition`
* `-moz-osx-font-smoothing`
* `-moz-tap-highlight-color`
* `-moz-transition`
* `-o-transition`
* `-webkit-font-smoothing`
* `-webkit-tap-highlight-color`
* `-webkit-transition`