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

Kate Massie
seal-mask
.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
218,692 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!