Change Color Text Placeholder in Form

I Need Help
1

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.

Bildschirmfoto 2022-01-23 um 14.20.16
Bildschirmfoto 2022-01-23 um 14.20.161152×1456 89.1 KB

2

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

input::placeholder
3

Just add something like this to your page footer:

<style>
::placeholder {
  color: red !important;
  opacity: 1;
</style>

More info here:

The result:

2022-01-23_19-44-32
2022-01-23_19-44-321292×226 7.52 KB

1 Like
4

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
5

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

6

But you will be excluding Explorer / Edge users this way.

7

???

::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.

8

Well, I’m still learning :man_student: but W3S teaches me:

    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: red;
      opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: red;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
      color: red;
    }
9

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
10

It seems W3S teaches me wrongly… I’ve been brave and installed Edge on my laptop and

works smoothly.

Note to self: go back into your corner and study more :man_student: :grin:

11

W3 is correct. And great for learning.

But don’t forget real world has context.

12

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 ;)?

13

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

14

In that case, I re-animated Edge last night. :joy: Downloaded and installed.

15

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