CSS3+jQuery实现的搜索表单

漂亮的搜索表单，无需图片实现圆角效果，结合jQuery实现搜索框内容自动填充

查看演示页面 View Demo 查看全部代码 View Code

样式定义：

   <style>
            
            body
            {
				background: #f1f1f1;
				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: 100px 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: #23441e;
			
			text-shadow: 0 1px 0 rgba(255,255,255,0.5);
		}
		
		#submit:hover
		{		
            background: #95d788;
            background-image: -moz-linear-gradient(#6cbb6b, #95d788);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
		}	

		#submit:active
		{		
            background: #95d788;
			outline: none;
           
             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
		}

		#submit::-moz-focus-inner
		{
		  border: none;
		}		
		
		/* ----------------------- */
        
        #search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
        
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }    
        
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }  
        
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }	
		
		
    </style>

javascript脚本：

<script>    
        $(document).ready(function() {           
			if (!Modernizr.input.placeholder)
			{
				
				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);
					}
				});
			}                
        });         
    </script>

HTML代码：

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

可以通过js代码，修改文本框默认文字