PrimeFaces – Watermark on text input

In PrimeFaces, your can use <p:watermark> to display watermark effect on input field. This watermark component is using HTML5 placeholder attribute in supported browsers like Safari, Chrome and Firefox, and fall back to JavaScript solution for non-support browser like IE.

Display watermark text in input field

  <p:inputText id="username" required="true" 
	label="username" size="40" value="#{userBean.username}" />
  <p:watermark for="username" value="Username *" />

In this tutorial, we will show you how to use PrimeFaces watermark component to create a watermark effect, and also style the text color.

Tools used :

  1. PrimeFaces 3.3
  2. JSF 2.2.11
  3. Eclipse 4.2
  4. Maven 3
  5. Tomcat 7

1. Watermark Example

Add text “username *” on top of the input text (watermark effect).


<!DOCTYPE html>
<html xmlns=""


	<f:facet name="last">
		<h:outputStylesheet library="mytheme" name="css/style.css" />

	<h1>PrimeFaces watermark example</h1>

	<div style="width: 500px">
	    <p:inputText id="username" required="true" label="username" size="40"
		requiredMessage="Please enter your username."
			<f:validateLength minimum="3" maximum="20" />
	    <p:watermark for="username" value="Username *" />
	    <p:message for="username" />

	    <p:commandButton value="test" style="margin:20px"
		action="#{userBean.register}" ajax="false" />


</html> – Do nothing

package com.mkyong;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userBean")
public class UserBean {

	String username;

	public String getUsername() {
		return username;

	public void setUsername(String username) {
		this.username = username;
	public String register(){
		return "thanks";

2. Demo


primefaces watermark example

Validation failed.

primefaces watermark example error

3. Change text color

A common request is change the default gray color text. To style it, you’ll need vendor prefix placeholder CSS properties :

/** chorme and safari **/
::-webkit-input-placeholder {
	color: blue !important;
	font-weight: normal !important;

/** firefox **/
:-moz-placeholder {
	color: blue !important;
	font-weight: normal !important;

/** IE **/
.ui-watermark {
	color: blue !important;
	font-weight: normal !important;

For IE, not supports for HTML5 placeholder, PrimeFaces will add an extra .ui-watermark.

See demo, the watermark text color is changed to “blue”.

primefaces watermark text color

P.S Tested On IE9, Chrome and Safari.

Download Source Code

Download it – (11 KB)


  1. PrimeFaces watermark component showcase
  2. How to change text color of <p:watermark>
  3. Change an input’s HTML5 placeholder color with CSS
  4. HTML5 Placeholder stylization with the help of CSS
  5. Style Placeholder Text
author image


Founder of, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities. Read all published posts by


newest oldest most voted

Thanks for the tutorial. I’m a beginner using Primefaces and last days I have been doing some exercises with the framework.
If you don’t mind I would like to ask you how can I implement a image inside a inputText using css. I tried with background-image in a custom css by overrinding some attributes and using styleClass=”myclass”.

<p:inputText value='' id='username' styleClass='username'/>

.username {
	background-image: url("search.gif") !important;
	background-repeat: no-repeat !important;
	background-position: left 1px !important;
	padding-left: 17px !important;

For some reason the image was not being displayed using styleClass attribute in the inputText component but if I use the style attribute then the image is displayed correctly in the text field.

<p:inputText value='' id='username' style='background-image: url(search.gif) !important;'/>

Any suggestion for my issue?

thanks in advance.


THanks .
I need source Code for uploading file via Primefaces.
Code which is in is not enough