There is possible to make ::placeholder text color

HTML-CSS
1

change in span?

Like default ::placeholder is black. And a text char like * i wanna make it to red?

Thanks.

2

Yes, that’s exactly how you do it.

::placeholder {
  color: red;
}

in your css.

If you are worried about cross-browser issues, then this might be better:

::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;
}

From here.

3

You can also use CSS Attribute Selectors

input[placeholder]  {
           color:yellow;
}
4

That will select any inputs that have the attribute placeholder, it’s not for setting the placeholder colour.

1 Like
5

No it selects the placeholder for that input and sets the color you wrote in the stylesheet. Check the code first.

6

No, that code selects any input with the attribute placeholder and sets the colour on the input element to yellow. That isn’t what the OP is trying to do. The pseudo-element selector ::placeholder is used to select the actual placeholder text.

Your code does a different thing: it sets the colour of everything in that input. True, it will make the placeholder text the colour you set it, but it will also make the typed text in the input the same colour. It doesn’t do what you think it does. See:

1 Like
7

Dan is right. See the codepen example he provides.

8

Thank you so much. Well with class selector is select the input only to change color is need ::placeholder. Thank you so much!

9

Oh I wasn’t aware that he wanted the text to be a different color. In that case, yeah the pseudo-element selector does a better job.