How to change text color of <p:watermark>

UI Components for JSF
Post Reply
RueKow
Posts: 331
Joined: 21 Jun 2011, 23:34
Location: Germany - Wiesbaden

09 Jan 2012, 15:12

Is it possible to change color of watermark component? In User's Guide I found no style/styleclass attribute for this. I tried to use ui-watermark style class like this:

Code: Select all

.ui-watermark {
	color: #D3D3D3 !important;
}
But it didn't work.
Rüdiger

PrimeFaces 7.0 | Ultima 2.0
Mojarra 2.3 | Tomcat 8/9 | Win7/10 | OS X 10.14

kukeltje
Expert Member
Posts: 9603
Joined: 17 Jun 2010, 13:34
Location: Netherlands

09 Jan 2012, 20:57

have you tried if you could change it from e.g. firebug?

cagatay.civici
Prime
Posts: 18317
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

09 Jan 2012, 20:59

Firebug +1.

That style is not added if your browser supports Html5 placeholder feature.

kukeltje
Expert Member
Posts: 9603
Joined: 17 Jun 2010, 13:34
Location: Netherlands

09 Jan 2012, 21:14

I was just going to ask where the ui-watermark came from since I did not see it. But I did see the placeholder. Ok, that is one of the first downsides than of HTML5. You cannot style the watermark text INDEPENDENT of the normal text color. Simply because you cannot have a css rule that fires based on the content of an element (not the attribute, that works). So I think the watermark component should add a class to the input if the value is identical to that of the placeholder (if it is at all!!). Sigh... and I already had so little hope for html5... Viva XForms (for forms at least, not for other ui design, but that is my opinion)

RueKow
Posts: 331
Joined: 21 Jun 2011, 23:34
Location: Germany - Wiesbaden

10 Jan 2012, 09:27

I spent some time to investigate how HTML5 placeholder works and if it is possible to style it with CSS.
I found following solution and it works for me.

Code: Select all

<style type="text/css">
	<!-- styles for chrome and safari -->
	::-webkit-input-placeholder {
		color: #808080 !important;
		font-weight: normal !important;
	}
	<!-- styles for firefox -->
	:-moz-placeholder {
		color: #808080 !important;
		font-weight: normal !important;
	}
        <!-- styles for internet explorer -->
	.ui-watermark {
   		color: #808080 !important;
   		font-weight: normal !important;
	}
</style>
Please note that different browsers have different styles of support for placeholders. For example, in Firefox you can set its background color, but not in Chrome. The list of supported CSS styles for the placeholder attribute you can find here:
http://www.splashnology.com/article/htm ... -css/1398/
Rüdiger

PrimeFaces 7.0 | Ultima 2.0
Mojarra 2.3 | Tomcat 8/9 | Win7/10 | OS X 10.14

cagatay.civici
Prime
Posts: 18317
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Jan 2012, 12:21

Thanks for sharing the solution RueKow.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: lethakula and 8 guests