Filler text when styling forms

I have two questions regarding a login form I'm styling. I am using onfocus to automatically delete text saying 'Email' from the box which the user enters their email in and the same for the password box.

1. How do I make this text a different colour (i.e. grey) and then the actual input colour black?
2. How does this work for the password field which is all stars?

A good example of what I'm trying to achieve is the twitter landing page开发者_如何学编程 (minus the more complex fading effects).

Thanks very much.

---

Just in case you didn't know...

This is possible without javascript. HTML5 has given us the placeholder attribute which does exactly what you are asking.

Example:

<input type="text" placeholder="Your Name" />
<input type="password" placeholder="Your Password" />

Demo: http://jsfiddle.net/rxfyj/

Browser support is limited, but I think that going forward - this is the best way to implement this functionality, while providing the javascript fallback if absolutely necessary. There are a lot of placeholder plugins out there, but almost all of them I've encountered have issues.

More information: http://diveintohtml5.ep.io/detect.html#input-placeholder

---

The password field is the same as the textfield, you will need jQuery which is a javascript library.

I can encourage you to use jQuery hosted by Google, it will save you bandwidth and will be faster for your users because of their huge amount of servers. Just add this in your HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Then, make sure the default style for your input field is gray, and add another class for the black color.

input {
    color: #aaa;
}

input.filled {
    color: #000;
}

And then use this jQuery:

$('input').keyup(function(event){

    if(event.keyCode != 9) /* exclude the tab key */
        $(this).addClass('filled');

});

You basically create an event handler that is bound to the input field, when a user releases a key it will add the filled class so the new color is used.

Edit

Woops, I miswrote the function name, should work now. Here is a jsfiddle example:

http://jsfiddle.net/E32bM/