CSS - Search Box with Inline Symbol

In this post, let's try to display a simple search box with magnifying glass symbol.

First, create a CSS file with following entry.(also add search.png to img directory under public_html dir)

.filterField af|inputText::content
{
  background-image: url("../../img/search.png");
  background-position: right center;
  background-repeat: no-repeat;
}

Next add af:inputText component to page and refer the CSS class in styleClass property

                            <af:inputText id="it1"
                                          label="Search" styleClass="filterField"/>

If you run the page, the search box will be displayed as shown

You can implement similar pattern by adding necessary styles in contentStyle property. But creating a class in CSS will help you to reuse the style across application.

                            <af:inputText id="it1"
                                          contentStyle='background-image: url("../img/search.png");background-position: right center;background-repeat: no-repeat;'
                                          label="Search"/>