实现搜索框效果

实现如下的搜索框

html 代码如下

<form action="">
   <input class="inbox" type="text" value="SEARCH..."/>
   <input class="insub" type="submit" value="搜索" />
 </form>

CSS代码如下

*{
    margin:0;padding:0;
   }
   input{
    outline: none;      取消input 聚焦时产生的蓝色框
   }
   form{
    background:#f00;
    width:500px;
    height:200px;
    margin:30px auto;
   }
   .inbox{
    width:185px;
    height:26px;
    background:#f1f1f1;
    border:1px solid #ccc;
    border-right:none;
    color:#898989;
    padding-left: 14px;
    line-height:26px;
    float:left;
   }
   .insub{
    width:27px;
    height:28px;
    border:1px solid #ccc;
    border-left:none;
    float:left;
    background:#f2f2f2 url(img/fdj.jpg) no-repeat 3px center;
    font-size:0;

/*color:transparent; *//*  设置按钮里的文字颜色为透明 */
 /*font-size:0; *//* 设置文字大小为0 ，不让文字显示 */
 text-indent: -9999px; /* 让文字首行缩进，给一个足够大的负值，让文本超出元素以外显示 */
   }