Установка входного Box фона

Question

Я должен создать поле ввода со следующим фоном

До сих пор в моем коде у меня есть код, приведенный ниже, и его не показывает -> Что бы правильная процедура сделать это?

У меня также есть несколько вариаций этой кнопки я должен производить, и они являются следующие:

• Крест на темной области кнопки - я просто хочу, чтобы использовать <span> тег с классом и установить графику на это -> Будет ли это хорошим способом?

• Значок скрепки сразу после кривой слева -> Я собирался сделать то же самое, что и выше -> Будет ли это хорошим способом?

HTML:

<div class="innerTo"> 
     <form action="#" method="get"> 
      <label for="recipients">TO: </label> 
       <input type="search" name="recipients" id="recipients" placeholder="Recipients Names"> 
    </form> 
    </div> 

CSS:

.innerBar .innerTo{ 
    width:200px; 
    padding:5px 0 0 15px; 
    display:block; 
    float:left; 
} 
.innerBar .innerTo label{ 
    margin:0 15px 0 0; 
    font-size:14px; 
    font-weight:bold; 
    color:#666666; 
} 
.innerBar .innerTo input[type=search] { 
    color: red; 
} 
.innerBar .recipients{ 
    background-image:url('../images/searchBGpng.png') no-repeat; 
    width:192px; 
    height:27px; 
} 

Answer 1

Fiddled:

<div class="input-container"> 
    <input type="text" value="aaaaaaaaaaaaaaaaaa"/> 
</div> 

.input-container { 
    background: url(http://i.stack.imgur.com/0Vlc5.png) no-repeat; 
    width:197px; 
    height:28px; 
} 
.input-container input{ 
    height:28px; 
    line-height:28px;/*results in nice text vertical alignment*/ 
    border:none; 
    background:transparent; 
    padding:0 10px;/*don't start input text directly from the edge*/ 
    width:148px;/*full width - grey on the side - 2*10px padding*/ 
} 

Если вы планируете повторно использовать его с разной шириной, вы должны посмотреть sliding doors technique.

Answer 2

Я создал новый код для формы, если вам нравится это, то идти вперед и применить его к HTML коду

Вы можете сделать это

HTML код

<form action="#" method="get"> 
      <label for="recipients">TO: </label> 
       <input type="search" name="recipients" id="recipients" placeholder="Recipients Names"> 
    <input type="submit" value=""> 
    </form> 

Код Css

label{ 
float:left; 
    margin:25px 0 0 0px; 
    padding:0; 
} 

input[type="search"], input[type="submit"]{ 
margin:20px 0 0 0px; 
    padding:0; 
    line-height:28px; 
    height:28px; 
    background: url("http://i.stack.imgur.com/0Vlc5.png") no-repeat 0 0; 
    border: 0 none; 
    float:left; 
} 

input[type="search"]{ 
width:152px; 
    padding-left:15px; 
} 

input[type="submit"]{ 
background-position:-167px 0; 
    width: 30px; 
    cursor:pointer; 
} 

Живая демо ссылка здесь http://jsfiddle.net/AL6vb/4/

Теперь измените код в соответствии макете это только демо .......