Customizing the Flex ComboBox control’s text input styles

The following example shows how you can customize the ComboBox control’s text input styles by setting the textInputStyleName style in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/21/customizing-the-flex-combobox-controls-text-input-styles/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        ComboBox {
            textInputStyleName: myCustomTextInputStyleName;
        }

        .myCustomTextInputStyleName {
            color: red;
            fontStyle: italic;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="editable:">
                <mx:CheckBox id="checkBox"
                        selected="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            editable="{checkBox.selected}"
            creationComplete="comboBox.open();">
        <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:Application>

View source is enabled in the following example.

Tagged as: editable, textInputStyleName