jsFiddle

• Run again
• Edit this fiddle

• HTML
• CSS
• JavaScript
• Result

    <form id="search-form" action="http://gurustop.net" method="get">
        
        <!-- Notes: 
            "placeholder" means watermark for the search field,
            and "s" is the query string WordPress uses for search
        -->
        <input type="search" id="search-input" name="s" 
            placeholder="looking for something?...." />
        
        <input type="submit" id="search-submit" value="" />
    </form>

/* Since this is CSS directly not LESS,
        you'll notice some duplicates, 
        and some values dependent on others */

/* Useful defaults, hide the standard way inputs show like */
    #search-form, #search-form * {
        margin:0; 
        padding:0;
        /* Make transparent. We'll set background next */
        border:none 0px;
        background:none;
    }
    
    /* Wudth and height are same as image */
    #search-form {
        background: 
            url(http://gurustop.net/wp-content/themes/coogee/images/search.gif) no-repeat left 0px;
        height: 32px;
        width:250px;
        /* Allow absolute position for children */
        position:relative;
        overflow:hidden;
    }

/*
    Note that picture:
        border is 2px, 
        and padding for word SEARCH word in picture is 6px
    This will affect our numbeers along with height
    Also note image word SEARCH is 2px below vertical middle

    Picture is used for hover state as well,
        Treat it as 2 parts on top of each other
        Each of them 32px
*/
    
    #search-form:hover
    {
        /* Hide first 32px part to show hover state next */
        background-position: left -32px;
    }
    
    #search-submit {
         /* width of word SEARCH plus border 
            plus 6px padding right and left each */
        width: 61px;
        height: 100%;
        cursor: pointer;
        right: 0; top:0;
        position:absolute;
    }

    /* Style the watermark text (called placeholder in HTML5)
        Tips from http://bit.ly/vCUFOF
        This is how to do it in Safari / Chrome.
        You cannot add "," to it to do Firefox as well
    */
    #search-input::-webkit-input-placeholder { 
        font: "Lucida Grande", "Segoe UI", "Bitstream Vera Sans", Tahoma, Verdana, Arial,sans-serif;
        font-style:italic;
        font-weight:bold;
        color:#999;
        font-size: 14px;
        line-height:1.01em;
    }

    /* Same as previous, 
            had to duplicate as it doesn't work with "," */
    #search-input:-moz-placeholder {
        font: "Lucida Grande", "Segoe UI", "Bitstream Vera Sans", Tahoma, Verdana, Arial,sans-serif;
        color:#9f9f9f;
        font-size: 14px;
        line-height:1.01em;
        margin:none;padding:none;
    }
    
    /* In Chrome, the placeholder doesn't disappear when you click the search field
        Only when you start typing.
        So, this is a hack to hide it on clicking the search box */
    #search-input:focus::-webkit-input-placeholder { 
        color: transparent;
    }

    #search-input {
         /* helps with vertical align, margin, etc.. */
        display:inline-block;
        position:absolute;
        height: 20px;
        left: 8px; /* 2px border + 6px padding */
        bottom:6px; /* (32 total - 20 height) / 2 */ 
        width:181px; /* remaining from total after removing button */
        color: #666; /* darker than watermark */
        /* Stop special defaults for search fields in browsers
            Chrome / Safari specific, then Firefox specific, then standard */
        -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
        -webkit-appearance: none; -moz-appearance: none; appearance:none;
        font: "Lucida Grande", "Segoe UI", "Bitstream Vera Sans", Tahoma, Verdana, Arial,sans-serif;
        /* Seems closest to word in pic, and still big */    
        font-size: 14px;
        /* make sure chrs like "g" show lower part complete */
        line-height:1.01em;
        
        /* IE 7 hacks */
        /* works better instead of vertical height
                total 14 + 2 lower from centre for word SEARCH */
        *line-height:16px; 
        *height:16px; /* needs to be same as line height */
        /* replace positions with margin
            (total 32 - line height 16) / 2 */
        *top:0; *margin-top:8px;
    }
    
    /* Remove rectangle Chrome adds when you enter textbox
        It's ugly and reveals our funky position setup 
        Tip from http://bit.ly/uZoxSc
    */
    #search-input:focus{
        outline:none;
    }

/* Just for demo, so that search doesn't stick to frame  */
    body {
        margin:5px;
    }

/* Fill search text with search term if any */

// Scoped my variables and code in function
// The function excutes itself
// The bracket before the function is a must for it to call itself
(function() {
    var getParameterByName = function(name) {
        // Copied from http://bit.ly/sMjYDR 
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null) return "";
        else return decodeURIComponent(results[1].replace(/\+/g, " "));
    };

    // Didn't use jQuery, so,
    //     I don't have to wait for page load
    document.getElementById("search-input")
        .value = getParameterByName("s");
})();