How to style placeholders

Printed From: openElement Website
Category:

openElement

Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1853
Printed Date: Apr 16 2024 at 3:00pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: How to style placeholders

Posted By: TC2020
Subject: How to style placeholders
Date Posted: Jul 08 2021 at 5:55am

Hi,

I am using placeholders for syntax hints. How do I change placeholder properties, such as font, font size, font color?. At the moment, hints appear to have the same properties as defined by the text input field but only in lighter gray. They look 'busy' when there are many fields close together.

Thank you.

Replies:

Posted By: Hobby001
Date Posted: Jul 08 2021 at 12:32pm

Quick answer:

see this for supported styles https://css-tricks.com/almanac/selectors/p/placeholder/" rel="nofollow - https://css-tricks.com/almanac/selectors/p/placeholder/

add css to your page

input::placeholder{
	color:red;
}

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video

Posted By: Hobby001
Date Posted: Jul 08 2021 at 1:10pm

See also here

https://developer.mozilla.org/fr/docs/Web/CSS/::placeholder" rel="nofollow - https://developer.mozilla.org/fr/docs/Web/CSS/::placeholder

Posted By: TC2020
Date Posted: Jul 08 2021 at 7:08pm

I followed the link and added CSS code for color and font size, as below:

input::placeholder {
color: #e0e0e0;
font-size: 10px;
}

The above works after a few attempts. I found for the change to take effect, the page must be saved. Somehow refreshing the page only did not work for me.

Thanks for your help.

Posted By: Hobby001
Date Posted: Jul 09 2021 at 11:28am

One more thing on this subject:

You can assign css to a specific spaceholder by using it's OE ID as name:

input[name="WE405d89ad06"]::placeholder{
color:red;
}