Hosted Fields Styling

After you have added the BR-DGE Hosted Fields Module to your App you can customize using the list of CSS properties below.

If a property is not listed below please get in contact with support to check whether it can be used.

Example

Set your customisation when creating your BR-DGE Hosted Fields Plugin Module Component:

comcarde.hostedFields.create(
{
client: clientInstance,
styles: {
// Style all elements
input: {
'font-size': '16px',
color: '#3A3A3A',
'font-family': 'monospace',
},

// Styling element state
':focus': {
color: 'blue',
},
'.valid': {
color: 'green',
},
'.invalid': {
color: 'red',
},

// Media queries
// Note that these apply to the iframe, not the root window.
'@media screen and (max-width: 700px)': {
input: {
'font-size': '16px',
},
},
}
}
}

List of CSS Properties

Property	Description
`-moz-appearance`	Used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme.
`-moz-osx-font-smoothing`	Used in Gecko (Firefox) to smooth over any jagged edges of text displayed due to pixel size.
`-moz-tap-highlight-color`	Used in Gecko (Firefox) to set the color of the highlight that appears over a link while it's being tapped.
`-moz-transition`	Used in Gecko (Firefox) to define the transition between two states of an element, for example `:hover` or `:active`.
`-webkit-appearance`	Used by WebKit-based browsers to display an element using platform-native styling based on the operating system's theme.
`-webkit-box-shadow`	Used by WebKit-based browsers to add shadow effects around an element’s frame.
`-webkit-font-smoothing`	Used by WebKit-based browsers to smooth over any jagged edges of text displayed due to pixel size.
`-webkit-tap-highlight-color`	Used by WebKit-based browsers to set the color of the highlight that appears over a link while it's being tapped.
`-webkit-text-fill-color`	Used by WebKit-based browsers specify the fill color of characters of text. If this property is not set, the value of `color` is used instead.
`-webkit-transition`	Used by WebKit-based browsers to define the transition between two states of an element, for example `:hover` or `:active`.
`appearance`	Used by WebKit-based browsers such as Safari to display UI elements with platform-specific styling, based on the operating system's theme.
`background-color`	Sets the background color of an element.
`border-radius`	Rounds the corners of an element's outer border edge.
`border`	Sets the properties of the border of an element. It sets the border-width, border-style & border-color in one value.
`box-shadow`	Adds shadow effects around an element’s frame.
`color`	Sets the color of characters of text. Color can be defined in many different ways, such as a color name (‘blue’), hexidecimal notation (#0000FF), RGB (0,0,255) as well as others.
`direction`	Sets the direction of text, table columns, and horizontal overflow.
`filter`	Applies graphical effects like blur or color shift to an element.
`font-family`	Sets the family of the font.
`font-size-adjust`	Provides a way to modify the size of lowercase letters relative to the size of uppercase letters.
`font-size`	Sets the size of the font.
`font-stretch`	Allows you to make text narrower (condensed) or wider (expanded).
`font-style`	Sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
`font-variant-alternates`	Used to specifically select alternate glyphs.
`font-variant-caps`	Controls the usage of alternate glyphs for capital letters.
`font-variant-east-asian`	Controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.
`font-variant-ligatures`	Allows you to adjust various ligatures on a font.
`font-variant-numeric`	Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
`font-variant`	Sets all the font variants for a font.
`font-weight`	Sets how thick or thin characters in text should be displayed.
`font`	Shorthand single property capable of setting `font-style`, `font-variant`, `font-weight`, `font-size` & `font-family` in a single property.
`height`	Specifies the height of an element. By default, the property defines the height of the content area.
`letter-spacing`	Sets the horizontal spacing behavior between text characters.
`line-height`	Sets the height of a line box. It's commonly used to set the distance between lines of text.
`margin`	Sets the margin area on all four sides of an element.
`margin-left`	Sets the margin area on the left of an element.
`margin-right`	Sets the margin area on the right of an element.
`margin-top`	Sets the margin area on the top of an element
`margin-bottom`	Sets the margin area on the bottom of an element.
`opacity`	Specifies the opacity/transparency of an element.
`outline`	Sets a line that is drawn around elements, outside the borders, to make the element "stand out".
`padding`	Used to create space around an element's content, inside of any defined borders.
`text-shadow`	Adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text.
`transition`	Allows you to change property values smoothly, over a given duration.
`width`	Sets an element's width.