<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/16/changing-a-form-items-background-color-when-a-child-control-has-focus/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Style>
        FormItem {
            paddingLeft: 4;
            paddingRight: 4;
            paddingTop: 4;
            paddingBottom: 4;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private const BACKGROUND_COLOR:Object = "haloBlue";

            private function formItem_focusIn(evt:FocusEvent):void {
                var item:FormItem = FormItem(evt.currentTarget.parent);
                item.setStyle("backgroundAlpha", 0.2);
                item.setStyle("backgroundColor", BACKGROUND_COLOR);
            }

            private function formItem_focusOut(evt:FocusEvent):void {
                var item:FormItem = FormItem(evt.currentTarget.parent);
                item.setStyle("backgroundColor", null);
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="First name:">
            <mx:TextInput id="firstName"
                    focusIn="formItem_focusIn(event);"
                    focusOut="formItem_focusOut(event);" />
        </mx:FormItem>
        <mx:FormItem label="Last name:">
            <mx:TextInput id="lastName"
                    focusIn="formItem_focusIn(event);"
                    focusOut="formItem_focusOut(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>