The following example shows how you can change the CheckBox control’s checkmark icon color and the border color by setting the control’s iconColor and borderColor styles repectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/changing-a-checkbox-controls-icon-color-and-border-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="iconColor:" />
        <mx:ColorPicker id="iconCol" />

        <mx:Spacer width="100" />

        <mx:Label text="borderColor:" />
        <mx:ColorPicker id="borderCol" />
    </mx:ApplicationControlBar>

    <mx:CheckBox selected="true"
            iconColor="{iconCol.selectedColor}"
            borderColor="{borderCol.selectedColor}"
            label="The quick brown fox jumped over the lazy dog."
            width="200"
            height="120" />

</mx:Application>

View source is enabled in the following example.

To change the CheckBox control’s rollover highlight color, you can set the themeColor style, as seen in the following snippet:

    <mx:CheckBox selected="true"
            iconColor="{iconCol.selectedColor}"
            borderColor="{borderCol.selectedColor}"
            label="The quick brown fox jumped over the lazy dog."
            width="200"
            height="120"
            themeColor="haloOrange" />
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

3 Responses to Changing a CheckBox control’s icon color and border color

  1. s choudhury says:

    The attribute iconColor is not getting resolved . Can you halp me to change the check color of a checkbox as node of a tree.

  2. s choudhury says:

    The attribute iconColor is valid in flex 3 . do you have any method to chnage the color of the check mark in a checkBox .
    Please help ! This is urgent.

  3. Sam Smith says:

    There’s no code after the jump. In fact, I can’t even find the jump.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree