1、效果图
2、HTML 代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="IndusJS/jquery.min.js"></script>
<style type="text/css">
.inputAttr1{
background: url("images/sxmcx.png") no-repeat 265px ;
width: 300px;
height: 41px;
border-radius:5px;
border: 1px solid #999999;
box-shadow: 1px 1px 3px #cccccc;
padding-left: 10px;
margin-right: 10px;
}
.inputAttr2{
width: 255px;
height: 35px;
margin-right:10px;
border:none;
line-height:35px;
}
input,img
{
vertical-align:middle;
}
</style>
<script type="text/javascript">
function search()
{
alert('查询结果正确');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" class="inputAttr1" name="activityUserValue" placeholder="注册邮箱/用户名"/>
<div style="width:310px;height:38px;border: solid 1px;">
<input type="text" class="inputAttr2" placeholder="项目/企业查询"/>
<img style="height:36px; cursor:pointer;" onclick="search()" src="images/sxmcx.png" />
</div>
</form>
</body>
</html>
3、搜索图标
