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 with:
 
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.

0 Responses to Styling a ComboBox control’s dropdown menu

  1. Ismail says:

    Hi, I need help Please!

    I don’t know xslt at all only html.
    I have an flowcentric app that uses an xslt file, i wanted to change the the border style of a drop down but this can’t be done in html – So i came across this wonderfull code.

    The problem is have no idea how to incorporate this code into my xslt file.

    Flowcentric xslt file:

    server

    true

    Can anyone please Assist!

    Regards;

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