Feedback

Menu
On This Page

Styling

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

General Appearance

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

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

Managed Classes

In addition to your own container styles, Flex Microform automatically applies some classes to the container in response to internal state changes.
Class
Description
.flex-microform-disabled
The field has been disabled.
.flex-microform-focused
The field has user focus.
.flex-microform-valid
The input card number is valid.
.flex-microform-invalid
The input card number invalid
.flex-microform-autocomplete
The field has been filled using an
autocomplete/autofill
 event.
To make use of these classes, include overrides in your application’s stylesheets. These styles can be combined as with regular CSS rules. Here is an example of applying CSS transitions in response to input state changes:
#cardNumber {
  background: #efefef;
  -webkit-transition: background 200ms;
  transition: background 200ms;
}
#cardNumber {
  background: white;
}
#cardNumber.flex-microform-focused {
  background: lightyellow;
}
#cardNumber.flex-microform-valid {
  background: green;
}
#cardNumber.flex-microform-valid.flex-microform-focused {
  background: lightgreen;
}
#cardNumber.flex-microform-autocomplete {
  background: #faffbd !important;
}
NOTE
*-valid
 and
*-invalid
 will be applied only when the card detection featureis enabled. See "Card Detection."

Input Field Text

To style the text within the iframe element, use the JavaScript library. The
styles
 property in the setup options accepts a CSS-like object that allows customization of the text. Only a subset of CSS properties is supported.
// ...
FLEX.microform({
  // ...
   styles: {
    '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'
    },
    '.invalid': {
      'color': 'red'
    }
   }
  // ...
});

Supported Properties

The following 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
Back to top