Get a free trial // Grow your CSS skills // Land your dream job

form value fade with JQuery

  • # May 21, 2010 at 11:20 am

    Hi all,

    I know I have seen this somewhere but I can’t for the life of me find it. I know Chris has done it on this site somewhere but I can’t remember what it was called to search for it.

    All I’m looking to do is to provide a helpful value in a form field.


    As the user clicks in the form field the value fades out leaveing an empty field.

    At the moment I can get the value to clear but if I try to fade out I end up fading the input rather than the value.

    Any help would be great, thanks.

    # May 21, 2010 at 12:19 pm

    This isn’t jQuery, but it works.


    # May 24, 2010 at 2:25 am

    Thanks for that. I’ll give that a try but I’d really like a JQuery version.

    # May 29, 2010 at 1:59 pm



    The jQuery


    $(“#target”).val(“Search”).focus(function() {

    if ($(this).val() == “Search”) {

    $(‘#target’).blur(function() {

    if ($(this).val() == ”) {



Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed