Как создать такой input

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
 
html{
  background: #787878;
}
 
 
.search-form {
  display: inline-block;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
  
  .field {
    float: left;
  }
  
  .field-text input[type="search"] {
    height: 40px;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 0 5px;
  }
  
  .field-button {  
    
    position: relative;
    z-index: 1;
    
    input[type="submit"] {
      height: 40px;
      width: 40px;
     
      border-radius: 3px;
      border: 1px solid #434343;
      background: #DB480B;
      box-shadow:
        inset 0 0 1px #fff;
    }    
    
    &:before {
      font: 12px "FontAwesome";
      content: "\f002";      
      display: inline-block;
      width: 16px;
      height: 16px;
      position: absolute;
      z-index: 2;
      top:0;
      left: 0;
      bottom:0;
      right: 0;
      margin: auto;
      color: #fff;
    }    
  }
}

#search-form{
    position: absolute;
    top: 160px;
    left: 950px;
    width: 160px;
    height: 20px;
    border-radius:10px;
    border: #00fcfc solid 2px;
    }
    #search-form input{
    padding:0;
    margin:0;
    display:block;
    border:none;
    outline:none;
    background:none;
    width:100%;
    height:100%;
    }
    #search-form .form-actions input{
    overflow:hidden;
    text-indent:-9999px;
    }
    #search-form .form-item input{
    font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#0000000;
    height:auto !important;
    padding:1px 0;
    }