Filler text when styling forms

Question

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.

How do I make this text a different colour (i.e. grey) and then the actual input colour black?
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.

score 2 · Accepted Answer · edited May 23 '17 at 10:28

2

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

edited May 23 '17 at 10:28

Community

1
1

answered Jul 06 '11 at 21:57

Wesley Murch

101,186
37
194
228

Thanks, this is so simple! How would I check if the browser supported it so I could impliment jQuery accordingly? – Sebastian Jul 06 '11 at 22:03
Check the link, you will find the answer there. – Wesley Murch Jul 06 '11 at 22:04

Kokos · Answer 2 · 2011-07-06T21:49:31.363

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/

Filler text when styling forms

2 Answers2