title: searchbox with jquery ui
body: <p>I am trying to get my searchbox to look like that of facebook, where the button looks like it's inside the textbox. Please see the facebook home page.
  I am using jquery ui and the graphics with it, for the button, problem is I think it adds borders to the button is creates, hence there is this separation between the text input and the button, anyway to get around this?</p>
  
  <p>Here is my search form</p>
  
  <pre><code>&lt;div class="div-search-form" style="display: inline; float: right;"&gt;&lt;form method="get" id="search_form" class="" action="/searches"&gt;
          &lt;input type="text" value="Search" name="q" id="q" class="search-term" style="border: medium none;"&gt;
               &lt;span class="small-button"&gt;&lt;a id="search_button" href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Search"&gt;&lt;span class="ui-button-icon-primary ui-icon ui-icon-search"&gt;&lt;/span&gt;&lt;span class="ui-button-text"&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p>I think I am getting there.</p>
  
  <p>Here is  my css </p>
  
  <pre><code>.search-button {
      background-position: -160px -112px;
      display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
      background-image: url(images/ui-icons_ff0084_256x240.png);
      float:left;
      border-left: 0 !important;
      background-color: white;
      width:16px;
  
  }
  .search-term {
      padding:1px 5px 1px 20px;
      border: 0 !important;
      float:left;
      background-image: url(images/ui-bg_flat_0_eeeeee_40x100.png);
  
  }
  .search-term:focus{
      background-image: none;
  }
  
  .div-search-form {
      margin-right: 0;
      float:right;
      margin-top:5px;
  }
  </code></pre>
  
  <h2>AND THE markup</h2>
  
  <pre><code>&lt;div class="div-search-form"&gt;&lt;form method="get" id="search_form" class="" action="/searches"&gt;
        &lt;input type="text" value="Search" name="q" id="q" class="search-term"&gt;
  
          &lt;a class="search-button" id="search-button" href="#"&gt;&amp;nbsp;&lt;/a&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Notice that unless I put a &nbps; the background image of the anchor tag doesn't show up. wonder why?</p>
  
  <p>Also, Not sure how to make them both the same size and bigger in height. Right now they are both 16px in height, but If I play with the padding the alignment goes out of whack.</p>