BullGuard Antivirus Sale - 60% Off with openElement !
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 Reverse Sort Order
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Topic: How to style placeholders
    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;
}



Edited by Hobby001 - Jul 09 2021 at 11:31am
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

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

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

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 08 2021 at 1:10pm
See also here



Edited by Hobby001 - Jul 08 2021 at 8:42pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 08 2021 at 12:32pm
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 - Jul 08 2021 at 1:08pm
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.