The following example shows how you can override the default icon in the Adobe Flex CheckBox control and replace it with a custom embedded graphic.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/29/adding-your-own-custom-checkbox-control-icons-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CheckBox {
            /* Unselected icons */
            upIcon: Embed(source="assets/bullet_red.png");
            overIcon: Embed(source="assets/bullet_red.png");
            downIcon: Embed(source="assets/bullet_yellow.png");
            /* Selected icons */
            selectedUpIcon: Embed(source="assets/bullet_green.png");
            selectedOverIcon: Embed(source="assets/bullet_green.png");
            selectedDownIcon: Embed(source="assets/bullet_yellow.png");
        }
    </mx:Style>

    <mx:CheckBox id="cheezburger"
            label="I can has cheezburger?"
            fontSize="12"
            fontWeight="bold" />

</mx:Application>

View source is enabled in the following example.

 
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.

5 Responses to Adding your own custom CheckBox control icons in Flex

  1. peterd says:

    Sorry for the lack of SWFs on the last couple posts… I’m currently in a hotel in Chicago for Adobe MAX 2007/North America. I’ll generate and posts the SWFs when I get a bit more time later in the week.

    Hope to see you all at MAX!

    Peter

  2. Leicht says:

    hi,I’m a fresh,can you give me some advise to study Flex,and can you tell me how do u study Flex,thanks.
    关注你的BLOG,很久了,收获很多,感谢你的分享!

  3. Stephen says:

    Hey peterd,

    If you need help with Flex, I have an awsome example that needs attention. It is an open source Flex/AMFPHP/MySQL based task management system (like tada). I actually want to make a basecamp replaement in Flex and make it open source. I actually only published a version with project management and task management, but I am working on one that does projects, tasks, calendar and user management in the system. Tell me if your interested or at least the code will get you started.

    Stephen Weber
    http://www.weberdesignlabs.com
    http://www.weberdesignlabs.com/blog/

  4. Kevin says:

    I’ve created my own custom skin through images. I’ve got a minor problem though, the old checkboxes are still showing.

    Do you happen to know why this is happening?

    Thanks,

    Kevin

    • Kevin says:

      Nevermind, I already found my problem. It was quite stupid actually =p, instead of chaning out the icon in the css I swapped out the whole background, D’Oh.

      Kevin

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