Text colour on placeholders - Page 1

User 122279 Photo


Senior Advisor
13,733 posts
Online Now

When RSD first appeared, there was an attribute 'placeholder'. It was removed because of some limitations in Chrome, but AFAIK Chrome has caught up and there is no reason why not allow the placeholder attribute back in again. As of SD3, latest version, it still cannot be used - other than after export.

That was the background story, now my question: How on earth can I get that placeholder text a bit darker, so that it can be seen? I have tried placing some css at all possible - and impossible - positions, to no avail.

I have a form here: https://eikweb.com/sharing/rff-form/contact.html Look at the field just above the submit button, squint your eyes, and with a bit of luck you can read what it says. Especially if you are using FireFox, you will have trouble. I would like to have that font a bit darker, but how do I do that? Any good ideas?
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2903050 Photo


Registered User
260 posts

Choose your color Inger.

Regards

Phil

<style>
::-webkit-input-placeholder {
color: #000;
}
::-moz-placeholder {
color: #000;
}
:-ms-input-placeholder {
color: #000;
}
::placeholder {
color: #000;
}
</style>
User 2903050 Photo


Registered User
260 posts

User 122279 Photo


Senior Advisor
13,733 posts
Online Now

Brilliant, Phil! I made it work by adding !important to the moz variant, like this:


::-moz-placeholder {
color: #000 !important;
}


Where did you find that bit of code? I didn't do anything for the other variants, it was mainly Ffx I was concerned about. You can check that form again :)
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2903050 Photo


Registered User
260 posts

Google's a wonderful thing. Just used a text editor and tried different things.
Coffeecup should add the placeholder within the program!!:)
User 122279 Photo


Senior Advisor
13,733 posts
Online Now

Yes, they really should add it back in. Thanks for your help! :)
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
809 posts

You can add the placeholders in by using jquery (target ID's) and you could also consider using opacity instead of color in Phils examples to adjust the levels of your placeholder(s).
Bootstrap 5 CSS Grid.
User 3043016 Photo


Registered User
6 posts

stupid question i know but if you don't ask you don't get....were do you place the code above after export???
User 187934 Photo


Senior Advisor
19,665 posts

You can add it to the head inside <style></style> tags or in a custom.css and add a link to a style sheet to the head.
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 3043016 Photo


Registered User
6 posts

my problem is i don't have a clue what I'm doing iv tried all of ur suggestion's but cant get any of them to work - CC should add editable place holders and save a lot of stress to people like me lol. here's my form https://www.bng59.com/BNG59_exported/BNG59/BNG59.html

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.