change background color of RadioButton in flex

Question

I have a radio button in flex and wanna change background color of its text to some color but I didn't find any solution for this problem.

EDIT : NOTICE: I want some ( not all) of radio button with some conditions in a radio button group, have different color

Is there any solution for this?

EDIT : code of my project

MyItemRenderer.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark" dataChange="onDataChange()" >
<fx:Script><![CDATA[
    import avmplus.constantXml;

    import ir.fanap.bizint.ui.flex.event.MyAdvancedListEvent;
    import ir.fanap.bizint.ui.flex.skin.MyRadioButtonSkin;

    import mx.core.UIComponent;

    private function onDataChange():void {
        changeColorForMultiCube();
    }

    private function changeColorForMultiCube():void {
    if (data['color'] != null ) {
        box.setStyle("skinClass","MySkin");
    }
    else{
    box.setStyle("SkinClass","RadioButtonSkin");//default skin for radio button
    }
    }
]]></fx:Script>
<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>

<s:RadioButton id="box" change="onDataChange()"/>
</s:ItemRenderer>

MySkin.mxml:

<?xml version="1.0" encoding="utf-8"?>

<fx:Metadata>
<![CDATA[
    /**
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.RadioButton")]
]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
    /* Define the skin elements that should not be colorized.
       For button, the graphics are colorized but the label is not. */
    static private const exclusions:Array = ["labelDisplay", "dot"];

    /**
     * @private
     */
    override public function get colorizeExclusions():Array {return exclusions;}

    /* Define the symbol fill items that should be colored by the "symbolColor" style. */
    static private const symbols:Array = ["dotFill"];

    /**
     * @private
     */
    override public function get symbolItems():Array {return symbols};

    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
</fx:Script>

<fx:Script>
    <![CDATA[
    /**
     * @private
     */    
    private static const focusExclusions:Array = ["labelDisplay"];

    /**
     *  @private
     */
    override public function get focusSkinExclusions():Array { return focusExclusions;};
    ]]>
</fx:Script>

<s:states>
    <s:State name="up" />
    <s:State name="over" stateGroups="overStates" />
    <s:State name="down" stateGroups="downStates" />
    <s:State name="disabled" stateGroups="disabledStates" />
    <s:State name="upAndSelected" stateGroups="selectedStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
</s:states>

<s:Rect width="{labelDisplay.width}" height="{labelDisplay.height}" left="18" right="0" top="3" bottom="3" verticalCenter="2">
    <s:fill>
        <s:SolidColor color="0xDAC1C3" />
    </s:fill>
</s:Rect>
<s:Label id="labelDisplay"
         textAlign="start"
         verticalAlign="middle"
         maxDisplayedLines="1"
         left="18" right="0" top="3" bottom="3" verticalCenter="2" />
</s:SparkSkin>

Answer 1

Here I am posting answer again for your ease. But I will request you to come out of your comfort level and search things. You will find many other important things in the process of finding your answer.

Below are the codes used.

Application.mxml

<?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" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var arrSource:Array = [{label:"Button1", color:0xDAC1C3},
                                            {label:"Button2", color:0xDAC1C3},
                                            {label:"Button3"}, {label:"Button4", color:0xDAC1C3}, {label:"Button5", color:0xDAC1C3},
                                            {label:"Button6"}, {label:"Button7", color:0xDAC1C3}, {label:"Button8", color:0xDAC1C3},
                                            {label:"Button9"},{label:"Button10", color:0xDAC1C3},{label:"Button11", color:0xDAC1C3}];

            private var arrCol:ArrayCollection = new ArrayCollection(arrSource);
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:List id="lstBtns" dataProvider="{arrCol}" itemRenderer="MyItemRenderer">

    </s:List>
</s:Application>

MyItemRenderer.mxml

<?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" dataChange="onDataChange()">

    <fx:Script><![CDATA[
        import mx.core.UIComponent;

        import spark.components.RadioButtonGroup;
        import spark.skins.spark.RadioButtonSkin;

        private static var rdoBtnGrp:RadioButtonGroup = new RadioButtonGroup();

        private function onDataChange():void {
            changeColorForMultiCube();
        }

        private function changeColorForMultiCube():void {
            if (data['color'] != null ) {
                box.setStyle("skinClass",MySkin2);
            }
            else{
                box.setStyle("SkinClass",RadioButtonSkin);//default skin for radio button
            }
        }
    ]]></fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>

    <s:RadioButton id="box" change="onDataChange()" label="{data.label}" group="{rdoBtnGrp}"/>

</s:ItemRenderer>

MySkin2.mxml Don't Delete anything which is pre-written when you are making skin unless you have specific reason to do so. I have added in this skin only Rect with id="bgColor" before the labelDisplay. The fill color is responsible for radio button's background color. If you want to set this color dynamic then you need to create a class extending RadioButton and define [SkinPart] there. Please see this and this

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark RadioButton component.  

       @see spark.components.RadioButton
       @see spark.components.RadioButtonGroup

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.RadioButton")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. 
           For button, the graphics are colorized but the label is not. */
        static private const exclusions:Array = ["labelDisplay", "dot"];

        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}

        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
        static private const symbols:Array = ["dotFill"];

        /**
         * @private
         */
        override public function get symbolItems():Array {return symbols};

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>

    <fx:Script>
        <![CDATA[
        /** 
         * @private 
         */     
        private static const focusExclusions:Array = ["labelDisplay"];

        /**
         *  @private
         */
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    </s:states>

    <s:Group verticalCenter="0" width="13" height="13">
        <!-- drop shadow -->
        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" 
                                   color.downStates="0xFFFFFF"
                                   alpha="0.011"
                                   alpha.downStates="0" />
                    <s:GradientEntry color="0x000000" 
                                   color.downStates="0xFFFFFF" 
                                   alpha="0.121"
                                   alpha.downStates="0.57" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>

        <!-- fill -->
        <s:Ellipse left="1" top="1" right="1" bottom="1">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" 
                                   color.overStates="0xBBBDBD" 
                                   color.downStates="0xAAAAAA" 
                                   alpha="0.85" />
                    <s:GradientEntry color="0xD8D8D8" 
                                   color.overStates="0x9FA0A1" 
                                   color.downStates="0x929496" 
                                   alpha="0.85" />
                </s:LinearGradient>
            </s:fill>
        </s:Ellipse>

        <!-- fill highlight -->
        <s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" alpha="0.33" />
            </s:fill>
        </s:Path>

        <!-- layer 6: highlight stroke (all states except down) -->
        <s:Ellipse left="1" right="1" top="1" bottom="1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
                    <s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
        <s:Rect left="5" top="1" right="5" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" 
                            color.downStates="0x939393"
                            alpha.overStates="0.22" />
            </s:fill>
        </s:Rect>

        <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
        <s:Ellipse left="0" top="0" right="0" bottom="0">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" alpha="0.70" />
                    <s:GradientEntry color="0x000000" alpha="0.80" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>

        <!-- dot -->
        <!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
        <s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
                data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
            <s:fill>
                <!--- @private
                      Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. -->
                <s:SolidColor id="dotFill" color="0" alpha="0.9" />
            </s:fill>
        </s:Path>
        <s:Path left="4" top="7" includeIn="selectedStates" 
                data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
            <s:stroke>
                <s:LinearGradientStroke>
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.7" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Path>
    </s:Group>

    <!-- Label -->
    <!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Rect id="bgColor" left="18" right="0" top="3" bottom="3" verticalCenter="2"
            >
        <s:fill>
            <s:SolidColor color="0xDAC1C3" />
        </s:fill>
    </s:Rect>
    <s:Label id="labelDisplay"
             textAlign="start"
             verticalAlign="middle"
             maxDisplayedLines="1"
             left="18" right="0" top="3" bottom="3" verticalCenter="2" />

</s:SparkSkin>

Answer 2

I don't know about Flex 3 but in Flex 4, it can be done in the following way.

1) Create an MXML skin with HostComponent as spark.components.RadioButton. 2)Create a graphics Rect before labelDisplay of radio button, which is of same dimension & position as the labelDisplay is.

<s:Rect width="{labelDisplay.width}" height="{labelDisplay.height}" left="18" right="0" top="3" bottom="3" verticalCenter="2">
        <s:fill>
            <s:SolidColor color="0xDAC1C3" />
        </s:fill>
    </s:Rect>
    <s:Label id="labelDisplay"
             textAlign="start"
             verticalAlign="middle"
             maxDisplayedLines="1"
             left="18" right="0" top="3" bottom="3" verticalCenter="2" />

3) Use this skin in the Spark RadioButton created in Application.

<s:RadioButton id="rdo" label="Programming in Actionscript" fontSize="20" x="100" y="100" skinClass="skinRdoBtn"/>

Answer 3

Try like this

myRadBtnId.setStyle("backgroundColor","0x00FF00");

(or)

myRadBtnId.setStyle("backgroundColor", #E8E8E8);