Utilizing the available application space effectively is one of the important things we need to consider when designing an user interface. Olden search interfaces had two parts text input field and a search button. Then the “search”/”find”/”go” text is replaced with a lens icon. Now a days this lens icon is embedded inside the input text itself.

If you want to do the same with Flex, here is a way.
We can assign the lens image as the background image and properly offset it by adjusting transparent area of the image. This technique can work only with a fixed width text field.

[cc lang=”actionscript3″]

<mx:TextInput width="120" id="searchField" backgroundImage="@Embed('res/search_background.png')" paddingLeft="20" height="24" toolTip="Search"/>

[/cc]


Here is how it will look

If you need your search field to be expandable place the TextInput inside a Canvas and place an Image on top.