The following example shows how you can change the focus rectangle color for a Flex TextInput control by setting the themeColor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/12/changing-the-focus-rectangle-color-on-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.DropdownEvent;
import mx.events.ColorPickerEvent;
private function colorPicker_change(evt:ColorPickerEvent):void {
textInput.setStyle("themeColor", evt.color);
}
private function colorPicker_close(evt:DropdownEvent):void {
focusManager.setFocus(textInput);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="themeColor:">
<mx:ColorPicker id="colorPicker"
change="colorPicker_change(event);"
close="colorPicker_close(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextInput id="textInput" />
</mx:Application>
View source is enabled in the following example.

{ 4 comments… read them below or add one }
Good!
This is the best Flex reference site ever! I wish I could tie in the Flex Builder dynamic help to this blog, lol.
Thanks for your work.
Thx, I did’nt found the CSS entry.. I looked around “focus_” properties.
Step 1. On focusIn, left side of flex textinput control become light blue,
Step 2. At the validation, entire control border become red and left side of the control become, thick red vertical line,
Step 3. Now when I gradually delete additional letters from the textinput control, entire red outline border automatically removed, but I can see red think line of the left side of the textinput control is still there,
My requirements are,
1. Validation colors need to change.
2. After validation, remain left red think vertical line need to change to normal focusIn color(light blue)
Can anyone help me to achieve this, is that event fire, CSS changes, function overwrite.
Thanks in advanced.