0

Click on the following link, TextBox with search Image on Left

i want the text box exactly the sameway with watermark in it. I tried multiple ways,but nothing worked

Content from my .xhtml file

<h:inputText id="bundelId" styleClass="icon2"  value="">

<p:watermark value="Enter Bundel Id" for="bundelId"     styleClass="icon2"></p:watermark> 
                                  </h:inputText>

My css contains following classes

.icon2 {


background: url(search.gif) no-repeat 4px 4px;
padding:4px  4px 2px 20px;
height:10px;
margin: 0;

}

.icon3 {



float: right;
background: url(search.gif) no-repeat left bottom;
border: 0;
cursor: pointer;
margin: 0;

}

I have tried with both jsf and primefaces tags together with css classes mentioned above.

Can someone help?

vamshi krishna
  • 19
  • 6

1 Answers1

1

if you are using FontAwesome you could try: 

<p:watermark value="&#xF002; Enter Bundel Id" for="bundelId" />

<h:inputText id="bundelId" value="" style="font-family:Arial, FontAwesome">

&#xF002; being the unicode for icon-search. https://fortawesome.github.io/Font-Awesome/cheatsheet/

sebudot
  • 13
  • 5
  • this actually works :D in my case I had to remove `Arial` from the font-family otherwise it would write `fl` instead of the icon – GameDroids Dec 13 '16 at 23:35