Setting the icon color on a ComboBox control in Flex

The following example shows how you can set the icon (arrow) color on a Flex ComboBox control by setting the iconColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/03/setting-the-icon-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="iconColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            iconColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the iconColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/03/setting-the-icon-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        ComboBox {
            iconColor: red;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />

</mx:Application>

Or, you can set the iconColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/03/setting-the-icon-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                comboBox.setStyle("iconColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="iconColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            iconColor="{colorPicker.selectedColor}" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/03/setting-the-icon-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ColorPicker;
            import mx.controls.ComboBox;
            import mx.events.ColorPickerEvent;

            private var arr:Array;
            private var colorPicker:ColorPicker;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});
                arr.push({label:"Ten"});

                colorPicker = new ColorPicker();
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "iconColor:";
                formItem.addChild(colorPicker);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.setStyle("iconColor", colorPicker.selectedColor);
                addChild(comboBox);
            }

            private function colorPicker_change(evt:ColorPickerEvent):void {
                comboBox.setStyle("iconColor", evt.color);
            }
        ]]>
    </mx:Script>

</mx:Application>

For an example of setting the icon color for the Flex ComboBox control’s dropdown menu only, see “Setting the icon color on a ComboBox control’s dropdown menu in Flex”.

0 thoughts on “Setting the icon color on a ComboBox control in Flex

  1. Great example Peter! Customizing everything possible on a component even the little things always makes a projects that much better.

  2. hi peter. how do you change the separator color? the line to the left of the arrow?

  3. jeanette stallons,

    I believe to style that line you’ll need to create your own custom skin and draw/modify the line using the drawing API.
    The default ComboBox skin class is \frameworks\projects\framework\src\mx\skins\halo\ComboBoxArrowSkin.as, and the line is drawn in a few places (but seemingly always in an if (!arrowOnly){...} block):

    if (!arrowOnly)
    {
        // line
        drawRoundRect(
            w - 22, 4, 1, h - 8, 0,
            borderColor, 1);
        drawRoundRect(
            w - 21, 4, 1, h - 8, 0,
            0xFFFFFF, 0.2);
    }
    

    So in this example above (taken from the default skin file), there are two lines that get drawn. The first drawRoundRect() method call draws a vertical line with the specified borderColor style. The second drawRoundRect() method call draws a 20% alpha white shadow just to the right of the first line.

    If you want to remove the vertical line completely, just delete each of the if (!arrowOnly){...} blocks in each of the case statements. Also, from the looks of it, the borderColor may be getting overridden by the dropdownBorderColor if the ComboBox control is in an error state (for example, the errorString property is not an empty string).

    Good question though, I’ll see if I can convert this into a full blog example where I remove that vertical separator line completely.

    Peter