用div+css做搜索框

怎么把这个图片做成搜索框，用div+css

解决方案 »

  1.   

    效果图，由于我没有背景图片，LZ将背景修改一下。我先设置为black。我已经将搜索框ps过了，LZ可以使用。代码贴上<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style>
        body{
    background-color:black;
    }
    .search{
    background:url('search.gif');
    width:286px;
    height:42px;
    }
    input{
    position:relative;
    background-color:transparent;
    border:0px;
    font-size:17x;
    font-weight:bold;
    color:white;
    top:10px;
    left:17px;
        width:210px;
    height:20px;
    }
      </style>
     </HEAD>
     <BODY>
      <div class="search">
        <input type="input" name="search"/>
      </div>
     </BODY>
    </HTML>
      

  2.   

    那就把后面的放大镜那块 绑定一个OnClick事件，
    方法就多了去了，在图片上设置热点，活着把图片剪下来 做button span a 的背景简单的就在 放大镜上面放置一个 相对定位的 a标签，
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <style>
            body{
                background-color:black;
            }
            .search{
                background:url('search.gif');
                width:286px;
                height:42px;
            }        .search a{ display: block; height: 42px; width: 50px; float: right;}
            input{
                position:relative;
                background-color:transparent;
                border:0px;
                font-size:17x;
                font-weight:bold;
                color:white;
                top:10px;
                left:17px;
                width:210px;
                height:20px;
            }    </style>
    </HEAD>
    <BODY>
    <div class="search">
        <input type="input" name="search"/> <a href="javascript:alert('HelloWorld')"></a>
    </div>
    </BODY>
    </HTML>