BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to style placeholders
  FAQ FAQ  Forum Search   Register Register  Login Login

How to style placeholders

 Post Reply Post Reply
Author
Message
TC2020 View Drop Down
Newbie
Newbie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 32
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Topic: How to style placeholders
    Posted: 08 Juil 2021 at 06:55
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.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5661
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 08 Juil 2021 at 13:32
Quick answer:

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

add css to your page

input::placeholder{
color:red;
}




Edited by Hobby001 - 08 Juil 2021 at 14:08
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5661
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 08 Juil 2021 at 14:10
See also here



Edited by Hobby001 - 08 Juil 2021 at 21:42
Back to Top
TC2020 View Drop Down
Newbie
Newbie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 32
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 08 Juil 2021 at 20:08
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.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5661
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 09 Juil 2021 at 12:28
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;
}



Edited by Hobby001 - 09 Juil 2021 at 12:31
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.