Using Styles with the ComboBox

You can set style properties to change the appearance of a ComboBox component. The styles specify values for the component's skins, cell renderer, padding, and button width. The following example sets the buttonWidth and textPadding styles. The buttonWidth style sets the width of the button's hit area and is in effect when the ComboBox is editable and you can only press the button to open the drop-down list.The textPadding style specifies the amount of space between the outside border of the text field and the text. It is useful for centering the text vertically in the text field if you make the ComboBox taller. Otherwise the text could appear to be at the top of the text field.

Create a new Flash file (ActionScript 3.0) document.
Drag the ComboBox component to the Stage and give it an instance name of aCb.

Open the Actions panel, select Frame 1 in the main Timeline and enter the following code:

import fl.data.DataProvider;

aCb.setSize(150, 35);
aCb.setStyle("textPadding", 10);
aCb.setStyle("buttonWidth", 10);
aCb.editable = true;

var items:Array = [
{label:"San Francisco", data:"601 Townsend St."},
{label:"San Jose", data:"345 Park Ave."},
{label:"San Diego", data:"10590 West Ocean Air Drive, Suite 100"},
{label:"Santa Rosa", data:"2235 Mercury Way, Suite 105"},
{label:"San Luis Obispo", data:"3220 South Higuera Street, Suite 311"}
];
aCb.dataProvider = new DataProvider(items);

Select Control > Test Movie.
Notice that the area of the button that you can click to open the drop down list is only a narrow area on the right side. Notice also that the text is centered vertically in the text field. You can try running the example without the two setStyle() statements to see their effect.

Using Styles with the ComboBox

To set styles on the ComboBox: