Placeholder Pseudo-Class

I think I misunderstood where your error was coming from. I originally thought that this was maybe from an auto-grader when you submit your project but now I think you were probably talking about the w3c validation service here: https://jigsaw.w3.org/css-validator/ Is that the case?

I do get a similar error message as you when I tried it there. You're going to get the same message with ::placeholder. Both of them will produce errors at this point.

These selectors are relatively new and their respective specifications are still in draft stage and subject to change. I'm only guessing here but I would think that the w3c doesn't want to spend time adding these things to the validator if they might be removed or significantly changed later.

You'll have to ignore these validation errors for now and just do what is required for your project.

In your comment, you indicated that you need to style the placeholder text so you should be using ::placeholder as mentioned in my answer.

You can use the non-standard names if the project requires it but it might not. Here's a table showing which browsers and versions will require the non-standard names but I would check if it is even required.

http://caniuse.com/#feat=css-placeholder

Another thing to keep in mind is that ::placeholder only supports the same properties that ::first-line supports which you can find a list of here: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

This means that text-align: right; may not work depending on the browser since it's not in that list of supported properties. It looks like you're ok with font-family and font-size

Thanks for the great info Jason and Steven. Yes, it was the css validator giving me the error. I actually had tried it as an element, but it wasn't working and yes, it seems the lack of support was the issue - ::-webkit-input-placeholder worked. Thank you both so much!!

You don't want to use the webkit prefix by itself because it's only going to work in the browsers that support it and not guaranteed to continue working in the future. For instance, your styling is not going to work in firefox. chrome may require the webkit prefix right now in version 56 but it won't be required in version 57 and not guaranteed to be supported going forward.

At a bare minimum you want to use the standard ::placeholder and then you can add the other non-standard ones to have a wider coverage. Put the standard one last.

So something like this:

input::-webkit-input-placeholder {
  color: red;
  text-align: right;
}

input::placeholder {
  color: red;
  text-align: right;
}

And you can add the other non-standard ones from the caniuse site if you want to but put ::placeholder last since that's the one you want the browser to use if it understands more than one of them.

It seems repetitive but each selector needs its own rule.

Do not write it like this:

input::-webkit-input-placeholder,
input::placeholder {
  color: red;
  text-align: right;
}

When you have multiple selectors combined like that into one rule, the browser has to ignore the entire thing if there is even 1 selector it doesn't recognize. In this case, it wouldn't work in firefox since it doesn't recognize the webkit prefix and it won't work in chrome because it doesn't recognize the standard ::placeholder

So each one you decide to include has to be in its own rule.

Understood. Thank you so much for the example. I will do it just like that. Thanks again!