Question

怎么在淘宝导航货店招上做出这个搜索框需要具体代码图片

Answer 1

<敏散style type="text/css">
/*search*/
.header-sea{margin:25px  0 0;width:260px;float:right;}
.header-sea form{position:relative;width:100%;height:32px;position:relative;z-index:110;}
.header-sea .search-txt{padding:0 11px 0 10px ;width:168px;height:30px;line-height:30px;border:0;background:url(../imgs/search.png) no-repeat;color:#333;font-size:12px;float:left;outline:none;}
.header-sea .search-btn{width:71px;height:30px;background:url(../imgs/search-btn.png) no-repeat left center;border:0;cursor:pointer;float:left;text-indent:-999em;overflow:hidden;outline:none;position:absolute;left:189px;z-index:999;}
.header-sea form label{color:#999;font-size:12px;position:absolute;top:8px;left:11px;pointer-events:none;}
.header-sea form.active label{top:-999em;left:-999em;}
</style>
<script>
  //清空默认搜素
    var val;
    $(".search-txt").focus(function(){
        $(this).parent().addClass('active');
    }).blur(function(){
        if($(this).val() == 正拿岩""){
            $(this).parent().removeClass('active');
        }else{
            $(this).parent().addClass('active');
        }
    });
    $(".header-sea label").click(function(){
    $(".search-txt").focus();
    });
</script>
<div class="header-sea">
    <form action="" method="post" class="clearfix">
        <input type="text" class="search-txt 举御png-bg" name="keyWord" />
        <label>搜索</label>
        <input type="submit" class="search-btn png-bg" value="搜索"/>
    </form>
</div>