Input Text focus like Facebook Input

Question

I have been trying to make a input like Facebook's main page input placeholders. Its behavior is not the same in IE8. I need a jquery solution or css which shows placeholder text in light grey and when you begin typing it turns to the dark grey color as it does in Facebook. Here is the code I wrote but it's not working in IE due to CSS3. I have tried to add modernizr but it didn't act the same, instead the text clears on click on IE.

Here is my example code:

<input type="text" class="search"  placeholder="Name or Business Name">

Demo: http://jsfiddle.net/hK2K7/

And you forgot how to google? There **[are a ton](http://stackoverflow.com/search?q=placeholder)** of **[answers](http://stackoverflow.com/questions/5522164/input-placeholders-for-internet-explorer)** here on SO also. — Mihai Iorga, Nov 14 '13 at 13:25
i did.. but i didnt find any thing .. i am missing the search term or some thing :S can any one help — Mossawir Ahmed, Nov 14 '13 at 13:26
i am sorry :) . i am like out my mind right now :D.. didnt noticed earlier.. leet me check and ill tell you the results.. thank you so much! — Mossawir Ahmed, Nov 14 '13 at 13:31

score 0 · Answer 1 · answered Nov 14 '13 at 13:49

0

is this what you are asking for ?

input[type=text] {
    color:#ccc;
    border:thin solid #999;
}

input[type=text]:focus {
    background:#999;
}

answered Nov 14 '13 at 13:49

Anando

72
11

score 0 · Answer 2 · answered Nov 14 '13 at 14:14

0

i have found the solution for cross browser :) here is the link

http://jethrolarson.github.io/placeholder-augment/

answered Nov 14 '13 at 14:14

Mossawir Ahmed

643
4
11
27

Input Text focus like Facebook Input

2 Answers2