Need CSS for placeholder text

CSS for that would be:

#forminator-module-622 input[name="text-1"]::placeholder,
 #forminator-module-390 input[name="text-1"]::placeholder{
    color: #0000FF !important;
    font-weight: bold;
}

Hope this helped.

Aakash, does your CSS cover both modules with the same instruction? Do we need to do the full code for module 622 just like you did for module 390? Thanks much!

Aakash, I added it in WPress, appearance,customize, CSS and it is NOT working.

Working as expected on my end – https://i.imgur.com/OAiZaMr.png

#forminator-module-622 input[name="text-1"]::placeholder,
#forminator-module-390 input[name="text-1"]::placeholder{
    color: #0000FF !important;
    font-weight: bold;
}

Try clearing your browser cache or loading the page in a private/incognito window after applying the CSS. Sometimes it takes a few minutes for changes to appear.

OK, young man. Now it is working. So if I want to change the font color, I just replace the hex setting, right?

Glad to hear it’s working.

Yup, you can change #0000FF to any acceptable CSS color.

Hi @finomozart

Just to add up to that: the color itself (though not font weight) can also be changed directly via plugin.

In “Appearance” section of the form you’d need to switch “Colors” option to “Custom” and under the “Input and Textareas” you’ll find setting for placeholder color.

That will only change color and affect other input fields but sometimes it may be helpful and just easier than adding CSS.

If you want to precisely target specific field and/or set text to bold then by all means the CSS solution would be the way to go.

Best regards,
Adam

Good help, thanks, Adam. Could you kindly reply with the CSS need to apply a value ONLY to a desktop and a laptop NOT to a tablet or a phone. Thanks!

@finomozart

You can use CSS media queries to selectively apply CSS rules based on screen width.
ex:

/* When the browser width is 600px and below */
@media screen and (max-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

Thanks Aakash,
So if I do NOT want the 20% max fields on small phone screen would this CSS work:

/* When the browser width is 600px and below */
@media screen and (max-width: 600px)
#forminator-module-622 div[id^=”calculation-1″]
{max-width:20% !important;}
#forminator-module-622 div[id^=”currency-1″]
{max-width:20% !important;}

or:

/* When the browser width is 600px and below */
@media screen and (max-width: 600px) {
.element {#forminator-module-622 div[id^=”calculation-1″]
{max-width:20% !important;}
#forminator-module-622 div[id^=”currency-1″]
{max-width:20% !important;}
}

Hi @finomozart

I hope you are doing well.

In case you don’t want it on mobile a good trick is just to change the max to min:

/* Desktop only */
@media screen and (min-width: 991px) {
  
}

Can you give it a try?

Best Regards
Patrick Freitas

Hello @finomozart ,

We haven’t heard from you for a while now, so it looks like you don’t need our assistance anymore.

Feel free to re-open this ticket if needed.

Kind regards
Kasia