title: Setting an Input Box Background
body: <p>I have to create an input box with the following background </p>
  
  <p><img src="https://i.stack.imgur.com/0Vlc5.png" alt="enter image description here"></p>
  
  <p>So far in my code I have the code below and its not showing -> What would be the correct procedure to do this?</p>
  
  <p>I also have a couple of variations of this button I have to produce and they are the following:</p>
  
  <ul>
  <li><p>A cross on the dark area of the button - I was just going to use a <code>&lt;span&gt;</code> tag with a class and set the graphic to that -> Would this be a good way to go?</p></li>
  <li><p>A paper clip icon just after the curve on the left ->  I was going to do the same as above -> Would this be a good way to go?</p></li>
  </ul>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="innerTo"&gt;
          &lt;form action="#" method="get"&gt;
             &lt;label for="recipients"&gt;TO: &lt;/label&gt;
                &lt;input type="search" name="recipients" id="recipients" placeholder="Recipients Names"&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>