Change Color Text Placeholder in Form

Hello guys

How can I change the color at the text in the ‘Placeholder’ at the form?
When I create a ‘Class’, for example, it only changes the text in the date or dropdown menu.
Thanks for your help.

It’s a pseudo element. (In most browsers anyway).

input::placeholder

In theory you can add this class to the class editor and style accordingly:

form-control::placeholder

For some reason lately I find it is working in edit, but not in preview or when published.

2 Likes

Strange, works fine for me. What does the inspector show?

???

::placeholder

and

form-control::placeholder

are the same, just the later is targeting inputs with the .form-control class.

You could always duplicate the class and change it to

::-ms-input-placeholder for edge, but modern browsers shouldn’t need this.

Using

form-control::placeholder

means you can use the Blocs class manager, no need to add code to the page header.

If you try to add ::placeholder to the class manager by itself, it tries to convert it to a class.

Same with input::placeholder which is another method for applying this, although you then need another class for text fields, because we are targeting the input tag. The Blocs class manager only recognises some tags at present.

2 Likes

W3 is correct. And great for learning.

But don’t forget real world has context.

Okay…but still I don’t understand why i can add a ‘class’ to the date for example without any problem but there is no option in blocs for the placeholder?
But thanks guys, I was able to fix it with this code

::placeholder { color: red !important; opacity: 1;

and also possible when i use the Class form-control::placeholder.

Good to know.

And Jerry…i thought Internet Explorer and Edge are dead ;)?

ups…is true…form-control::placeholder is only seen in the preview of Blocs…but not in the preview in the browser.

As I mentioned. Placeholder is a pseudo element hence the ::