ColdFusion provides the following methods for controlling the style and appearance of Flash forms and their elements:
- Skins provide a simple method for controlling the overall appearance of your form. A single skin controls the entire form.
- Styles provide a finer-grained level of control than skins. Each style specifies a particular characteristic for a single control. Many styles are also inherited by a control's children. You can use both techniques in combination: you can specify a skin for your form and use styles to specify the appearance (such as input text font) of individual controls. For detailed information on the style names and values that you can use, see ColdFusion Flash Form Style Reference in the CFML Reference.
Controlling form appearance with Flash skins
The cfform tag takes a skin attribute, which lets you select an overall appearance for your form. The skin determines the color used for highlighted and selected elements.
You can select the following Flash skins:
- haloBlue
- haloGreen (the default)
- haloOrange
- haloSilver
About Flash form styles
The ColdFusion Flash form tags have a style attribute that lets you specify control characteristics using CSS syntax. You can specify a style attribute in the following tags:
- cfform
- cfformgroup
- cfcalendar
- cfformitem, types hrule and vrule
- cfgrid
- cfinput
- cfselect
- cftextarea
- cftree}}The attributes for the {{cfform and cfformgroup generally apply to all the form or form group's children.Flash supports many, but not all, standard CSS styles. ColdFusion Flash forms only support applying specific CSS style specifications to individual CFML tags and their corresponding Flash controls and groups. You cannot use an external style sheet or define a document-level style sheet, as you can for HTML forms.
Flash form style specification syntax
To specify a Flash style, use the following format:
style="stylename1: value; stylename2: value; ..." |
For example, the following code specifies three style values for a text input control:
<cfinput type="text" name="text2" label="Last" |
About Flash form style value formats
Style properties can be Boolean values, strings, numbers, or arrays of these values.
Length format
You specify styles that take length or dimension values, including font sizes, in pixels.
The fontSize style property lets you use a set of keywords in addition to numbered units. You can use the following keywords when you set the fontSize style property. The exact sizes are defined by the client browser.
- xx-small
- x-small
- small
- medium
- large
- x-large
xx-large The following cfinput tag uses the style attribute with a fontSizekeyword to specify the size of the text in the input box:
<cfinput type="text" name="text1" style="fontSize:X-large" label="Name">
Time format
You specify styles that take time values, such as the openDuration style that specifies how fast an accordion pleat opens, in milliseconds. The following example shows an accordion tag that takes one-half second to change between accordion pleats:
<cfformgroup type="accordion" height="260" style="openDuration: 500"> |
Color format
You define color values, such as those for the backgroundColor style, in the following formats:
Format |
Description |
|---|---|
hexadecimal |
Hexadecimal colors are represented by a six-digit code preceded by two number sign characters (##). Two # characters are required to prevent ColdFusion from interpreting the character. The range of possible values is ##000000 to ##FFFFFF. |
VGA color names |
VGA color names are a set of 16 basic colors supported by all browsers that support CSS. The available color names are Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, and Yellow. Some browsers support a larger list of color names. VGA color names are not case-sensitive. |
Some styles support only the hexadecimal color format.
Some controls accept multiple colors. For example, the tree control's depthColors style property can use a different background color for each level in the tree. To assign multiple colors, use a comma-delimited list, as the following example shows:
style="depthColors: ##EAEAEA, ##FF22CC, ##FFFFFF" |
About Flash form style applicability and inheritance
Because of the way Flash control styles are implemented, some common styles are valid, but have no effect, in some tags. Therefore, in the table in Styles valid for all controls in ColdFusion Flash Form Style Reference in the CFML Reference, the listed styles do not cause errors when used in controls, but might not have any effect.
Styles can be inheritable or noninheritable. If a style is noninheritable, it only affects the tag, and does not affect any of its children. For example, to maintain a consistent background color in an hbox form group and its children tags, specify the color in all tags. If a style is inheritable, it applies to the tag and its children.
Example: applying styles to a Flash form
The following code creates a Flash form that uses a skin and styles to control its appearance.
The code for the form is as follows. Comments in the code explain how formatting controls and styles determine the appearance.
<!--- Specify the form height and width, use the HaloBlue skin.
|