Changing a CheckBox control’s icon color and border color

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 as: borderColor, iconColor