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 CSS Selectors Selectors - Beyond the Basics Attribute Selectors

Posted by Dwi Andreas Prawiranegara
Dwi Andreas Prawiranegara
7,181 Points

How do we make the placeholder "email@website.com" to be green in color?

input[placeholder="email@website.com"] { color:green; }

Doing this only means when user types, the font color would be green. But it does not make the placeholder font to be green before anyone started typing anything

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

The syntax for targeting a placeholder is still classified as experimental, but can be done using a pseudo-element on most recent browser versions. See the MDN page.

For compatibility with older browsers, you may also need to include a number of browser-specific selectors.

UPDATE: The ::placeholder pseudo element is no longer experimental, and should work now without browser-specific extensions. For more details, see the page linked above.

Rhys Dyson
Rhys Dyson
45 Points
Rhys Dyson
Rhys Dyson
45 Points

Placeholder is a pseudo element, not an attribute. So it must be selected like so:

Globally:

::placeholder { color: red; }

Field Specific:

input::placeholder { color: red; }