CSS3 search box with HTML5 placeholder

Nice Modern Looking Search Bar

by Jennifer Perrin

HTML

<form id="searchbox">
    <input id="search" type="text" placeholder="Type search here">
    <input id="submit" type="submit" value="Search">
</form>

CSS

body {
    background: #f1f1f1 url("http://jenniferperrin.com/image/background.gif");
    text-align: center;
}    


#searchbox {
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
    -moz-border-radius: 35px;
    border-radius: 35px;
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;            
    width: 500px;
    height: 35px;
    padding: 10px;
    margin: 50px auto 50px;
    overflow: hidden;
}

#search, #submit {
    float: left;
}

#search {
    padding: 5px 9px;
    height: 23px;
    width: 380px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;
    -moz-border-radius: 50px 3px 3px 50px;
     border-radius: 50px 3px 3px 50px;
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}

#submit {        
    background: #6cbb6b;
    background-image: -moz-linear-gradient(#95d788, #6cbb6b);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
    -moz-border-radius: 3px 50px 50px 3px;
    border-radius: 3px 50px 50px 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #7eba7c #578e57 #447d43;
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;           
    height: 35px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 90px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color:...

JavaScript

/**
 * CSS3 search box with HTML5 placeholder
 **/
$(document).ready(function() {           
    var placeholderText = $('#search').attr('placeholder');
    
    $('#search').attr('value',placeholderText);
    $('#search').addClass('placeholder');
    
    $('#search').focus(function() {                
        if( ($('#search').val() == placeholderText) ) {
            $('#search').attr('value','');
            $('#search').removeClass('placeholder');
        }
    });
    
    $('#search').blur(function() {                
        if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) ) {    
            $('#search').addClass('placeholder');                      
            $('#search').attr('value',placeholderText);
        }
    });              
});