Flex Examples
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.
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.
Share
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.
Hi,
thanks for all your blog
Can we totaly disabled Halo theme on a textInput (Flex 3) ?
I tried theme-border : ClassReference(null) ; and many others things but nothing works
regard
For an unknown reason, my focus rectange is shifted to the right/bottom when clicking a Textfield (I created a class that extends Panel). Any one that can tell why ?
@guido,
Can you please file a bug at http://bugs.adobe.com/flex/ with a simple test case showing the focus rectangle behavior and somebody from Adobe can take a look.
Thanks,
Peter
Hm, is it broken in Flash Builder using 3.5 SDK?