Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Online Registration Form

Placeholder Pseudo-Class

I am getting ready to submit the on-line registration form project, but the css validation came back with an error regarding my placeholder text pseudo-class. This is my code:

input:placeholder-shown {   
    text-align: right;
    font-family: 'Rokkitt', serif;
    font-size: 1em;
}

Not sure how else to write this rule. Doesn't seem to work any other way. Any suggestions? Thanks!!

Hi Julie,

What error are you getting and what are the requirements for this part of the project?

I am just needing to style placeholder text in a form field - in this case, the word 'required' for the 'name' and 'email' input elements. The error code I am getting says: Unknown pseudo-element or pseudo-class :placeholder-shown. In the CSS, I tried just placeholder instead of placeholder-shown, but it doesn't work. Thanks!

2 Answers

I can't see the project details so I can only go off of what you've said here.

Have you tried ::placeholder with double colons?

::placeholder is a pseudo element so it requires double colons.

:placeholder-shown is a pseudo class and would require a single colon.

::placeholder represents the placeholder text. So if you need to style the placeholder text itself then you should use that one.

:placeholder-shown would target the input elements that are currently showing their placeholder text. It does not apply the styles to the placeholder text itself.

Try the example on this mdn page to see what it's doing: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

You'll see that the input element has a silver border because it is currently showing the placeholder text. Once you start typing something the border will change back to black because the input is no longer showing the placeholder text and :placeholder-shown therefore no longer matches.

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.

Steven Parker
Steven Parker
216,136 Points

The :placeholder-shown pseudo-class does not have complete browser support.

This may be why it is being indicated as an error. But there are also pseudo-elements to select the placeholder text directly, these vary by vendor but include ::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder and :-ms-input-placeholder. Perhaps one of those (or a combination of them) would resolve your issue.

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