打赏

带搜索图标的文本框

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、搜索图标

posted @ 2019-01-08 15:42  学习靠自己  阅读(1360)  评论(0)  编辑  收藏  举报