Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
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:
font-family: 'Rokkitt', serif;
Not sure how else to write this rule. Doesn't seem to work any other way. Any suggestions? Thanks!!
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.
Steven Parker229,017 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.