Creating semi-transparent ComboBox dropdown menus in Flex

The following example shows how you can create semi-transparent dropdown menus in the Flex ComboBox control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/creating-semi-transparent-combobox-dropdown-menus-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myCustomDropdownStyleName {
            backgroundAlpha: 0.4;
            backgroundColor: white;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:ComboBox id="comboBox"
                dropdownStyleName="myCustomDropdownStyleName">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="One" />
                    <mx:Object label="Two" />
                    <mx:Object label="Three" />
                    <mx:Object label="Four" />
                    <mx:Object label="Five" />
                    <mx:Object label="Six" />
                    <mx:Object label="Seven" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:VBox backgroundAlpha="0.5"
            backgroundColor="haloSilver"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

Tagged as: backgroundAlpha, dropdownStyleName