Setting the text roll over color on a ComboBox control in Flex

The following example shows how you can change the text roll over color for a Flex ComboBox control by setting the textRollOverColor style.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/14/setting-the-text-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_textRollOverColor_test"
        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="textRollOverColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#FF0000" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            textRollOverColor="{colorPicker.selectedColor}" />
 
</mx:Application>

[GoogleAdsWide]

View source is enabled in the following example.

You can also set the textRollOverColor 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/14/setting-the-text-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_textRollOverColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Style>
        ComboBox {
            textRollOverColor: 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>

You can also set the textRollOverColor style in ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/14/setting-the-text-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_textRollOverColor_test"
        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("textRollOverColor", 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="textRollOverColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />
 
</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/14/setting-the-text-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_textRollOverColor_test"
        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 = "textRollOverColor:";
                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;
                addChild(comboBox);
            }
 
            private function colorPicker_change(evt:ColorPickerEvent):void{
                comboBox.setStyle("textRollOverColor", evt.color);
            }
        ]]>
    </mx:Script>
 
</mx:Application>

Update: To see a Flex 4 based example using the Spark DropDownList control, see “Setting the text roll over color on a Spark DropDownList control in Flex 4”.

20 thoughts on “Setting the text roll over color on a ComboBox control in Flex

  1. Ive searched the net for some hours now and cant find any way to get my Combobox in a Plain tex it. I Want my Combobox to be in one color not the upper half more brighter.

    Is there a way to do this? I really hate that I dont have full control over the controls. The only way I see is to make my own component and that really suck and is time consuming.

  2. Erik,

    Is this roughly what you’re looking for?

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:ComboBox id="comboBox"
                fillColors="[red,red]"
                fillAlphas="[1,1]"
                highlightAlphas="[0,0]"
                dataProvider="[One,Two,Three,Four,Five,Six]" />
    
    </mx:Application>
    

    Peter

  3. Just one more thing I want the borders in the same color, and the line between the arrow and the text removed =) Is this posible?

  4. Erik,

    Yes, it’s possible. You’d need to make a new skin graphic/asset in Photoshop/Fireworks/Flash and then set the skin style on the ComboBox.

    Peter

  5. This isn’t possible only with css modifications? I’m going to make the whole design with skining but for the first release I dont have the time to.

    anyway is it posible to remove the borders or set the border color the same as the bakground color in css?

  6. Erik,

    As far as I know, you can’t remove just the borders and the line using just CSS. But I could very well be wrong. You could try asking on FlexCoders and see if anybody knows of a solution.
    Otherwise I think you have to use Flash or some other application to create a graphical skin.

    In fact, I seem to recall that somewhere on the Adobe site is a bunch of Flex skin templates for the various controls/containers. It may be as simple as creating a new skin from the ComboBox template, removing whatever lines you don’t want, publishing a SWC, and then setting the skin style in Flex.

    Peter

  7. Thanks for your input Peterd, the fact that I’m going to make the whole design skin based makes me not want to make anything skinbased right now. Butt I will make a try at writing on FlexCoders.

    Thanks again for you help!:)

  8. Hey Peter,

    Do you have any idea how I might go around changing the direction the arrow points on the combobox? I wanted the arrow to point upwards because on my application the ComboBox is actually popping upwards so I feel like it’s only appropriate to have the arrow point upwards.

    Thanks,
    Ben

  9. Ben,

    Off the top of my head I’d say you may need a custom skin. Looking at the API I don’t see an easy way to override the arrow icon. The easiest way is probably to download the “Flex Skin Design Extension for Flash” and create a new skin by going “File > New”, select the “Templates” tab and “Flex Skins” category, and finally select the ComboBox template. For each of the four states, select the down arrow and then select “Modify > Transform > Flip Vertical”. Save and publish the .FLA to generate the .SWC and .SWF file (the .SWC and .SWF will be located in the same directory as your .FLA.)

    Next, in Flex Builder, copy the .SWC file into the /libs/ folder and add this code to the .MXML file:

    <mx:Style>
        ComboBox {
            skin: Embed(skinClass="ComboBox_skin");
        }
    </mx:Style>
    

    Finally, save and run your Flex application and with any luck, you should see the arrow icons pointing upwards.

    There may be a much easier way that I’m not seeing at first glance. You may want to try asking on the FlexCoders list, or even filing an enhancement request in the Flex bug base at http://bugs.adobe.com/flex/.

    Peter

  10. Thanks a bunch, Peter

    That was really helpful. Yea when I was looking into it on Friday I realized that it might have been a skinning issue but I haven’t dealt with skins at all and was having a tough time looking at how to do skinning. Thanks both for your bug submission/change for me and also for the tip on the skin design extension for flash. Very helpful. I’d also like to add thank you for running and maintaining this site. I’ve been using flash for years but just recently started using Flex for my job and this site has been extremely helpful. Keep up the good work!

    Thanks again,
    Ben

  11. Is there a way to change the roll over text color for the main part of the combo-box not the drop down part? I need the text to change colors because the different skins I am using needs different color text to be readable up/over. I would actually like a global setting as I have the same issue with buttons and other similar components.

    Thanks!

    1. Hi John!
      Did you find a solution? Cause I’m kinda looking for something similar.
      Regards,

      BS_C3

      1. Create a custom comboBox that extends comboBox. Add an event listener for mouseOver and mouseOut. In the mouseOverHandler, set the color style of the textInput to rollOverColor. In the mouseOutHandler, set the color style of the textInput back to the color style. Also make sure to initially set the mouseEnabled and mouseChildren on the textInput to false, so that you don’t get any strange blinking during rollOver.

        Now when you set the rollOverColor style on your custom combobox, it will work the way you expect.

        Curtis

  12. Hi Peter ~
    Is there a way to do this in Flex 4? Seems the textRollOverColor style is not available for the Spark version of the comboBox component (s|ComboBox).

    Thanks.
    Jeremy

    1. @Jeremy,

      You could create a custom item renderer and override the color in the hovered and/or selected state, as seen in the following example:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx">
       
          <s:DropDownList id="ddl"
                  itemRenderer="skins.SparkItemRenderer"
                  selectionColor="black"
                  requireSelection="true"
                  selectedIndex="0"
                  horizontalCenter="0" top="20">
              <s:dataProvider>
                  <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine]" />
              </s:dataProvider>
          </s:DropDownList>
       
      </s:Application>

      And the custom item renderer, skins/SparkItemRenderer.mxml, is as follows:

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                      autoDrawBackground="true">
          <s:states>
              <s:State name="normal" />
              <s:State name="hovered" />
              <s:State name="selected" />
          </s:states>
       
          <s:Label id="labelDisplay"
                   color="black" color.selected="white"
                   left="3" right="3" top="4" bottom="3" />
       
      </s:ItemRenderer>

      Peter

  13. Good day Peter,

    thanks for your examples!

    How would i create a combobox or dropdown list to fall down same slowly – slider effect and not just drop down as default. Can not find no info bout it in network. Would be very thankful if you could explain – how its done?

    Thanks!

Comments are closed.