Customizing the ComboBox component

You can transform a ComboBox component horizontally and vertically while authoring. While authoring, select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands.

If text is too long to fit in the combo box, the text clips to fit. You must resize the combo box while authoring to fit the label text.

In editable combo boxes, only the button is the hit area—not the text box. For static combo boxes, the button and the text box constitute the hit area.

Using styles with the ComboBox component

You can set style properties to change the appearance of a ComboBox component. If the name of a style property ends in "Color", it is a color style property and behaves differently than non-color style properties. For more information, see Using styles to customize component color and text.

The combo box has two unique styles. Other styles are passed to the button, text box, and drop-down list of the combo box through those individual components, as follows:

The button is a Button instance and uses its styles. (See Using styles with the Button component.)
The text is a TextInput instance and uses its styles. (See Using styles with the TextInput component.)
The drop-down list is an List instance and uses its styles. (See Using styles with the List component.)

A ComboBox component uses the following Halo styles:

Style	Description
`themeColor`	The background of a component. This is the only color style that doesn't inherit its value. Possible values are "haloGreen", "haloBlue", and "haloOrange".
`color`	The text of a component label.
`disabledColor`	The disabled color for text.
`fontFamily`	The font name for text.
`fontSize`	The point size for the font.
`fontStyle`	The font style: either "normal", or "italic".
`fontWeight`	The font weight: either "normal", or "bold".
`textDecoration`	The text decoration: either "none", or "underline".
`openDuration`	The number of milliseconds to open the drop-down list. The default value is 250.
`openEasing`	A reference to a tweening function that controls the drop-down list animation. Defaults to sine in/out. For more equations, download a list from Robert Penner's website.

Using skins with the ComboBox component

The ComboBox component uses symbols in the Library panel to represent the button states. The ComboBox has skin variables for the down arrow. Other than that, it uses scroll bar and list skins. To skin the ComboBox component while authoring, modify symbols in the Library panel and re-export the component as a SWC. The CheckBox component skins are located in the Flash UI Components 2/Themes/MMDefault/ComboBox Assets/states folder in the library of either the HaloTheme.fla file or the SampleTheme.fla file. For more information, see About skinning components.

A ComboBox component uses the following skin properties:

Property	Description
ComboDownArrowDisabledName	The down arrow's disabled state. Default is `RectBorder`.
ComboDownArrowDownName	The down arrow's down state. Default is `RectBorder`.
ComboDownArrowUpName	The down arrow's up state. Default is `RectBorder`.
ComboDownArrowOverName	The down arrow's over state. Default is `RectBorder`.