Html
    Css
    Js
#myInput {
	background-image:url('//www.jq22.com/tp/6368374909440002249842396.png');
	/* 搜索按钮 */
			background-position:10px 12px;
	/* 定位搜索按钮 */
			background-repeat:no-repeat;
	/* 不重复图片*/
			width:100%;
	font-size:16px;
	/* 加大字体 */
			padding:12px 20px 12px 40px;
	border:1px solid #ddd;
	margin-bottom:12px;
}
#myUL {
	/* 移除默认的列表样式 */
			list-style-type:none;
	padding:0;
	margin:0;
}
#myUL li a {
	border:1px solid #ddd;
	/* 链接添加边框 */
			margin-top:-1px;
	background-color:#f6f6f6;
	padding:12px;
	text-decoration:none;
	font-size:18px;
	color:black;
	display:block;
}
#myUL li a.header {
	background-color:#e2e2e2;
	cursor:default;
}
#myUL li a:hover:not(.header) {
	background-color:#eee;
}

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

简洁的搜索界面

0