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

CSS Online Registration Form

Kate Massie
seal-mask
.a{fill-rule:evenodd;}techdegree
Kate Massie
Front End Web Development Techdegree Student 7,062 Points
Posted by Kate Massie
.a{fill-rule:evenodd;}techdegree
Kate Massie
Front End Web Development Techdegree Student 7,062 Points

Styling an input placeholder

Why do we need pseudo classes and pseudo elements to style placeholder text inside an input box? Why can't you just select the placeholder itself?

Furthermore, the solution I have found for styling placeholder text across browsers uses a combination of pseudo elements and pseudo classes (reference https://css-tricks.com/almanac/selectors/p/placeholder/). Why do different browsers require this difference (i.e. why are they not all either pseudo classes or elements)?

Finally, why do these declarations not include an element before the colon(s)?

A huge thank you to whomever explains some or all of this to me!!

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Greetings, Kate,

The pseudo-classes and pseudo-elements ARE selecting the placeholder itself. Since it's part of an input element, it has no tag of it's own and cannot be given a unique ID or a class, so there's really no other way to select it.

Placeholders are just one of several evolving CSS features, and until standards are agreed on, early implementations always use vendor-specific prefixes. Personally, I try to avoid bleeding-edge features that don't yet have standard properties, at least on a production website. But on the other hand, some of the brand-new features are the most fun to play with.

Finally, leaving off the element in the selector just targets anything which the pseudo-class or pseudo-element can apply to (in this case, anything with a placeholder). Since these particular pseudo's only apply to inputs, having a blank or the input tag in front are equivalent. But using some of the other (more common) pseudo's without tags can produce some drastic results!