Question

点击以下链接， TextBox with search Image on Left

我希望文本框与水印完全相同。我尝试了多种方法，但没有任何效果

我的.xhtml文件中的内容

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

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

我的CSS包含以下类

.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;

}

我已尝试将jsf和primefaces标记与上面提到的css类一起使用。

有人可以帮忙吗？

Answer 1

如果您使用FontAwesome，可以尝试：

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

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

是图标搜索的unicode。 https://fortawesome.github.io/Font-Awesome/cheatsheet/

如何使用primefaces将图像作为水印放在TextField中？

1 个答案: