Using styles with the TextInput component

The TextInput component has its backgroundColor and borderStyle style properties defined on a class style declaration. Class styles override global styles; therefore, if you want to set the backgroundColor and borderStyle style properties, you must create a different custom style declaration or define it on the instance.

A TextInput component supports the following styles:

Style	Theme	Description
`backgroundColor`	Both	The background color. The default color is white.
`borderStyle`	Both	The TextInput component uses a RectBorder instance as its border and responds to the styles defined on that class. See RectBorder class. The default border style is `"inset"`.
`marginLeft`	Both	A number indicating the left margin for text. The default value is 0.
`marginRight`	Both	A number indicating the right margin for text. The default value is 0.
`color`	Both	The text color. The default value is 0x0B333C for the Halo theme and blank for the Sample theme.
`disabledColor`	Both	The color for text when the component is disabled. The default color is 0x848384 (dark gray).
`embedFonts`	Both	A Boolean value that indicates whether the font specified in `fontFamily` is an embedded font. This style must be set to `true` if `fontFamily` refers to an embedded font. Otherwise, the embedded font is not used. If this style is set to `true` and `fontFamily` does not refer to an embedded font, no text is displayed. The default value is `false`.
`fontFamily`	Both	The font name for text. The default value is `"_sans"`.
`fontSize`	Both	The point size for the font. The default value is `10`.
`fontStyle`	Both	The font style: either `"normal"` or `"italic"`. The default value is `"normal"`.
`fontWeight`	Both	The font weight: either `"none"` or `"bold"`. The default value is `"none"`. All components can also accept the value `"normal"` in place of `"none"` during a `setStyle()` call, but subsequent calls to `getStyle()` return `"none"`.
`textAlign`	Both	The text alignment: either `"left"`, `"right"`, or `"center"`. The default value is `"left"`.
`textIndent`	Both	A number indicating the text indent. The default value is 0.
`textDecoration`	Both	The text decoration: either `"none"` or `"underline"`. The default value is `"none"`.

Style

Theme

Description

backgroundColor

Both

The background color. The default color is white.

borderStyle

Both

The TextInput component uses a RectBorder instance as its border and responds to the styles defined on that class. See RectBorder class.

The default border style is "inset".

marginLeft

Both

A number indicating the left margin for text. The default value is 0.

marginRight

Both

A number indicating the right margin for text. The default value is 0.

color

Both

The text color. The default value is 0x0B333C for the Halo theme and blank for the Sample theme.

disabledColor

Both

The color for text when the component is disabled. The default color is 0x848384 (dark gray).

embedFonts

Both

A Boolean value that indicates whether the font specified in fontFamily is an embedded font. This style must be set to true if fontFamily refers to an embedded font. Otherwise, the embedded font is not used. If this style is set to true and fontFamily does not refer to an embedded font, no text is displayed. The default value is false.

fontFamily

Both

The font name for text. The default value is "_sans".

fontSize

Both

The point size for the font. The default value is 10.

fontStyle

Both

The font style: either "normal" or "italic". The default value is "normal".

fontWeight

Both

The font weight: either "none" or "bold". The default value is "none". All components can also accept the value "normal" in place of "none" during a setStyle() call, but subsequent calls to getStyle() return "none".

textAlign

Both

The text alignment: either "left", "right", or "center". The default value is "left".

textIndent

Both

A number indicating the text indent. The default value is 0.

textDecoration

Both

The text decoration: either "none" or "underline". The default value is "none".

The TextArea and TextInput components both use the same styles and are often used in the same manner. Thus, by default they share the same class-level style declaration. For example, the following code sets a style on the TextArea declaration but it affects both TextArea and TextInput components.

_global.styles.TextArea.setStyle("disabledColor", 0xBBBBFF);

To separate the components and provide class-level styles for one and not the other, create a new style declaration.

import mx.styles.CSSStyleDeclaration;
_global.styles.TextInput = new CSSStyleDeclaration();
_global.styles.TextInput.setStyle("disabledColor", 0xFFBBBB);

Notice how this example does not check if _global.styles.TextInput existed before overwriting it; in this example, you know it exists and you want to overwrite it.