Html
    Css
    Js

    
                        
body {
	text-align:center;
}
input[type=search] {
	border:1px solid #A9A9A9;
	border-radius:5px;
	padding:5px 0 5px 8px;
}
::-webkit-input-placeholder {
	/* WebKit browsers */
color:#3385FF;
}
:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
color:#3385FF;
}
::-moz-placeholder {
	/* Mozilla Firefox 19+ */
color:#3385FF;
}
:-ms-input-placeholder {
	/* Internet Explorer 10+ */
color:#3385FF;
}
input[type=search]:hover {
	border:1px solid #00C5FF;
}
input[type=search]:focus {
	border:1px solid #3385FF;
	box-shadow:0 0 2px #3385FF;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

一个简单的搜索框

一个带有提示信息的搜索框,当鼠标经过时,边框会变色,当搜索框选中时,边框会出现阴影。

0