The following example shows how you can set the check box fill colors on a Flex CheckBox control by setting the fillColors
style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/01/26/setting-the-fill-colors-on-a-checkbox-control-in-flex/ --> <mx:Application name="CheckBox_fillColors_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:CheckBox id="checkBox" label="CheckBox" fillColors="[red,haloOrange,yellow,haloGreen]" themeColor="black" /> </mx:Application>
You can also set the fillColors
style in an external .CSS file or <Style> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/01/26/setting-the-fill-colors-on-a-checkbox-control-in-flex/ --> <mx:Application name="CheckBox_fillColors_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> CheckBox { fillColors: red,haloOrange,yellow,haloGreen; themeColor: black; } </mx:Style> <mx:CheckBox id="checkBox" label="CheckBox" /> </mx:Application>
Or, you can set the fillColors
style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/01/26/setting-the-fill-colors-on-a-checkbox-control-in-flex/ --> <mx:Application name="CheckBox_fillColors_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function init():void { checkBox.setStyle("fillColors", ["red", "haloOrange", "yellow", "haloGreen"]); checkBox.setStyle("themeColor", "black"); } ]]> </mx:Script> <mx:CheckBox id="checkBox" label="CheckBox" initialize="init();" /> </mx:Application>