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.
<?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:
<?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:
<?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:
<?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”.
Great example Peter! Customizing everything possible on a component even the little things always makes a projects that much better.
hi peter. how do you change the separator color? the line to the left of the arrow?
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 specifiedborderColorstyle. The seconddrawRoundRect()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 thecasestatements. Also, from the looks of it, theborderColormay be getting overridden by thedropdownBorderColorif the ComboBox control is in an error state (for example, theerrorStringproperty 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
For a full example of removing the vertical separator line on a Flex ComboBox control, see “Removing the vertical separator from the ComboBox control in Flex”.
Peter