Background image for Search Box

I implemented a Google Custom Search to an existing site – but needed to build it in to an existing search box, so needed to add the Gogole background logo into my search box if it was empty, and have it dissapear on click, etc…..

Add this to the markup…


And add this to the form field…




    function setBG(){
        var s = document.getElementById("search");
        if (s.value == '') {
            s.style.backgroundImage = 'url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif)';
            s.style.backgroundRepeat = 'no-repeat';
        } else {
            s.style.backgroundColor = 'white';
        }
    }  

    function clearBG(s){
        s.style.backgroundImage = 'none';
        s.style.backgroundColor = 'white';
    }