Styling a ComboBox control’s dropdown menu

Here is a basic example of formatting the Flex ComboBox control’s dropdown menu using Cascading Style Sheets (CSS). In this example we create a 3 pixel drop shadow on the right of the dropdown menu, as well as round each of the corners on the drop down by 5 pixels.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/16/styling-a-combobox-controls-dropdown-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Style>
        .myComboBoxDropdown {
            dropShadowEnabled: true;
            shadowDistance: 3;
            shadowDirection: "right";
            cornerRadius: 5;
        }
    </mx:Style>

    <mx:ComboBox dropdownStyleName="myComboBoxDropdown">
        <mx:dataProvider>
            <mx:String>one</mx:String>
            <mx:String>two</mx:String>
            <mx:String>three</mx:String>
            <mx:String>four</mx:String>
            <mx:String>five</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: dropdownStyleName