Today I was looking at the front page of http://twitter.com/ (without being logged in) and I really liked the simplistic login style they had but I am not quite sure how to code it for myself.

 

At first, I thought they had somehow managed to have plain text as the background for the input fields but noticed in their HTML code that they simply had something to the effect of the following html for their forums:

 

<span>Enter email</span>
<input type="text" value="" />

<span>Enter password:</span>
<input type="password" value="" />

 

Their html had a bit of extra's, like some css classes and such, but that was the core of it. This may seem like a stupid question, but I'm just wondering how they managed to have the values with the span overlap the inputs, and what possible jQuery or Javascript they may have used to make it seemingly disappear as soon as you begin entering text (not on focus).

 

This seems kinda basic but for some reason I can't figure it out. Hopefully people thinking more clearly than myself may be able to help. Thank you in advance for any contributions you may be able to make to helping me solve this issue!

Try this.

Try this.

 

 

That looks great, thank you very much! I'll try that out later when I get more time.