Question

Does anyone knows how can i make an effect like this in my search bar:
https://www.dropbox.com/help

<input type="text" name="input">

I mean the onFocus and onBlur effect with the text disappearing and appearing dynamically.

Thank you folks!

Answer 1

They use CSS Animations on the color property:

Excerpt from their main.css:

.sick-input.focused label{ color:#ccc;transition:color .2s linear 0;
                           -webkit-transition:color .2s linear 0;
                           -moz-transition:color .2s linear 0 }

---

You can mimic the effect using the :focus pseudo selector on the input field with the previously mentioned definitions.

---

If for some reason I wasn’t clear enough 🙂

http://jsfiddle.net/d9CMR/

---

More robust solution:

http://jsfiddle.net/d9CMR/3/

---

Update (with proper color change):

http://jsfiddle.net/d9CMR/6/

---

Source:

HTML

<input type="text" name="input" data-default="fubar">​

CSS

input { color:#333; }    
input:focus { color:#ccc;transition:color .2s linear 0;
              -webkit-transition:color .2s linear 0;
              -moz-transition:color .2s linear 0 }
input.typing { color:#333; }​

Script

$(function(){
    var input = $('input[name="input"]'),
        defaulttext = input.attr('data-default');

    input.val(input.attr('data-default'));

    input.on('focus', function(){
        if(input.val() != defaulttext)
            input.addClass('typing');
        else
            input.removeClass('typing');

    }).on('keydown', function(){        
        if(defaulttext == input.val()) input.val('');

        input.addClass('typing');
    }).on('blur', function(){
        if(input.val() == '') input.val(defaulttext);

        that.removeClass('typing');
    }); 
});