前端自定义搜索框实现

定义一个前端div

<div class="site-search">
       <div id="search">
           <input type="text" name="s" class="text" placeholder="输入关键字搜索" />
           <button type="button" onclick="javascript:doSearch();" class="submit">搜索</button>
       </div>
   </div>

关键代码，样式调整

.site-search{
    width:25%;
    float:right;
    width:250px;
    height:50px;
}
#search{
    position:relative;
    margin-top:15px;
}
#search input{
    padding-right:30px;
}
#search button{
    position:absolute;
    right:4px;
    top:2px;
    border:none;
    padding:0;
    width:24px;
    height:24px;
    background:url("static/images/search.png") no-repeat scroll right center transparent;
    direction:ltr;
    text-indent:-9999em;
}

实现效果

在这里插入图片描述

项目全部代码在自己的开源项目：​​https://github.com/u014427391/myblog​​