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
Katsumi Suno
4,194 PointsHow can I target the placeholder text color in the form elements?
I'd like to change the color of the placeholder text in the "name" and "email" forms to white while they have focus. If I go with the following code...
input:focus
{
background-color: lightgreen;
color: white;
}
...only the text I'm going to type is changed to white but the placeholder remains grey. Where and how is this text color defined?
I'm just building on top of Guils project files and the above code is all I added so far.
2 Answers
bleedcmyk
5,945 PointsOh wait I just reread your post. Give me a second to edit my post.
http://codepen.io/anon/pen/qERNeo
Look at this codepen and tell me if this is what you are trying to do?
You can target form elements with css selectors like;
input[name=nameofelement] {}
input[type=submit] {}
input[type=password] {}
etc
(Sorry I edited this post so much. I misread your post at first.)
Guil Hernandez
Treehouse TeacherHi Katsumi Suno,
Take a look at this blog post I wrote about the placeholder pseudo-element. :)
Katsumi Suno
4,194 PointsThank you Guil Hernandez, that's a good read!
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsNot quite. The form in the lesson is defined by Guil as bellow:
<input type="text" name="name" placeholder="name">This puts a placeholder text into that form as long as the user didn't type anything in. In the above case it would be "name". This placeholder text appears grey and I didn't find any declaration that sets this grey in the whole CSS of Guil.
And actually I'd like to change that text color to white on focus but all I get is the text color of typed in text just like in your example but not the placeholder text color...
bleedcmyk
5,945 Pointsbleedcmyk
5,945 PointsCheck the updated codepen;
http://codepen.io/anon/pen/qERNeo
It should still be affected by an input selector.
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsWell now we have a changing background, which is nice but I'd like to change the grey placeholder text to white :)
bleedcmyk
5,945 Pointsbleedcmyk
5,945 PointsYou might want to try vendor prefixes on the placeholder pseudo selector;
Firefox
::-moz-placeholder { color: green; }
or for Chrome
::-webkit-input-placeholder { color: green; }
or for IE
:-ms-input-placeholder { color: green; }
In hindsight maybe I should have started with that. A lot of vendor prefixes are becoming depreciated by web standards and its hard to know at first glance which ones are still being used.
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsNope, I'm using Chrome and I'm up to date.
Okay, based on what you suggested, I've found (should have googled it before, sorry!) the following piece of code for Chrome:
::-webkit-input-placeholder
This now changes the placeholder text color and by doing this...
:focus::-webkit-input-placeholder
...I have what I wanted: changing text color on focus :) Thanks for your impulse!
But I got a bit confused by your last statement. Is this solution somehow outdated? And by vendor prefixes you mean "webkit" and "moz"? I'm not familiar whats going on on the technical side of web desing, I'm fairly new to all of this...
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsNever mind, you've edited your comment and I now totally get what you're saying :) Greatly appreciated!
bleedcmyk
5,945 Pointsbleedcmyk
5,945 PointsNot really outdated, but maybe on the verge of becoming outdated. A lot of the older lessons (especially in the HTML/CSS) section tell you about browser prefixes that are no longer needed because the W3C has updated the web standards for that particular functionality/rendering.
An example might be something like, a year or two ago you would have needed a ton of vendor prefixes to get all of the browsers to recognize the same piece of code like;
-moz-transition: background-color 1s ease; -ms-transition: background-color 1s ease; -webkit-transition: background-color 1s ease; -o-transition: background-color 1s ease;
Where as now, since the W3C has made just;
transition: background-color 1s ease;
the web standard, it means that all updated browsers by default should recognize the single property without needing vendor prefixes for each different browser.
Some browsers like Chrome auto-update and so you generally will always have the most recent version. Some browsers like Firefox do not, and sometimes people end up having versions of it that are potentially years old.
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsGood to know! I'm always checking the things I learn from the courses in greater detail on sites like w3schools.com. So I guess I will find out if I encounter an outdated lesson on treehouse.
Thank you again for your effort and for elaborating on that topic!
bleedcmyk
5,945 Pointsbleedcmyk
5,945 PointsNo problem, sorry the solution was so convoluted!