Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/30/changing-the-width-of-the-arrow-button-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.labelField = "@label";
                menu.dataProvider = xmlList;
                popUpButton.popUp = menu;
                menu.maxWidth = popUpButton.width;
            }
        ]]>
    </mx:Script>

    <mx:XMLList id="xmlList">
        <node label="Alert" />
        <node label="Button" />
        <node label="ButtonBar" />
        <node label="CheckBox" />
        <node label="ColorPicker" />
        <node label="ComboBox" />
    </mx:XMLList>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="arrowButtonWidth:">
                <mx:HSlider id="slider"
                        minimum="16"
                        maximum="64"
                        value="16"
                        snapInterval="1"
                        tickInterval="4"
                        showTrackHighlight="true"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item..."
            openAlways="true"
            arrowButtonWidth="{slider.value}"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

Since arrowButtonWidth is a style, you can also set it’s value in an external .CSS file or within an <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    PopUpButton {
        arrowButtonWidth: 96;
        popUpStyleName: myCustomPopUpStyleName;
    }

    .myCustomPopUpStyleName {
        fontWeight: normal;
        textAlign: left;
    }
</mx:Style>

Or, you can set the arrowButtonWidth style using ActionScript, as seen in the following snippet:

popUpButton.setStyle("arrowButtonWidth", 96);