title: Serverside Datatables Search box styling
body: <p>I have noticed that the search and show inputs for the datatables are stuck inside <code>&lt;label&gt;</code> tags. When I try to remove the label tags from the source JavaScript, the input disappears. I may be doing it wrong but is there a way to remove it so that I can adjust its width and make it adhere to my dynamic column sizing?</p>
  
  <p>This is the part I'm talking about (from the source JavaScript file)</p>
  
  <pre><code>function pb(a) {
          var b = a.oClasses,
              c = a.sTableId,
              d = a.oLanguage,
              e = a.oPreviousSearch,
              f = a.aanFeatures,
              g = '&lt;input type="search" class="' + b.sFilterInput + '"/&gt;',
              j = d.sSearch,
              j = j.match(/_INPUT_/) ? j.replace("_INPUT_", g) : j + g,
              b = h("&lt;div/&gt;", {
                  id: !f.f ? c + "_filter" : null,
                  "class": b.sFilter
              }).append(h("&lt;label/&gt;").append(j)),
              f = function() {
                  var b = !this.value ?
                      "" : this.value;
                  b != e.sSearch &amp;&amp; (fa(a, {
                      sSearch: b,
                      bRegex: e.bRegex,
                      bSmart: e.bSmart,
                      bCaseInsensitive: e.bCaseInsensitive
                  }), a._iDisplayStart = 0, O(a))
              },
              g = null !== a.searchDelay ? a.searchDelay : "ssp" === y(a) ? 400 : 0,
              i = h("input", b).val(e.sSearch).attr("placeholder", d.sSearchPlaceholder).bind("keyup.DT search.DT input.DT paste.DT cut.DT", g ? Oa(f, g) : f).bind("keypress.DT", function(a) {
                  if (13 == a.keyCode) return !1
              }).attr("aria-controls", c);
          h(a.nTable).on("search.dt.DT", function(b, c) {
              if (a === c) try {
                  i[0] !== I.activeElement &amp;&amp; i.val(e.sSearch)
              } catch (d) {}
          });
          return b[0]
      }
  </code></pre>
  
  <p>The code when the page is loaded</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;div id="table_filter" class="dataTables_filter pull-left"&gt;
              &lt;label&gt;
                  &lt;input type="search" class="form-control input-sm" placeholder="Search" aria-controls="table"&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See how the search input is under the label? I was wondering how I can remove it so that it adheres to my column sizing.</p>