title: Can't Change Search Box Width Or Position For DataTable
body: <p>I have a <code>DataTable</code> which i have been styling/setting up and i'm almost there but i just cant figure out the last few styling things i'm after for the <code>search</code> <code>input</code></p>
  
  <ul>
  <li>Left align the input</li>
  <li>Make field wider</li>
  <li>Set focus on load</li>
  <li>Make field same size as other fields on site</li>
  </ul>
  
  <p>I have the following code i'm using</p>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$('#dialPlanListTable').dataTable({
      "ordering": true,               // Allows ordering
      "searching": true,              // Searchbox
      "paging": true,                 // Pagination
      "info": false,                  // Shows 'Showing X of X' information
      "pagingType": 'simple_numbers', // Shows Previous, page numbers &amp; next buttons only
      "pageLength": 10,               // Defaults number of rows to display in table
      "columnDefs": [
          {
              "targets": 'dialPlanButtons',
              "searchable": false,    // Stops search in the fields 
              "sorting": false,       // Stops sorting
              "orderable": false      // Stops ordering
          }
      ],
      "dom": '&lt;"top"f&gt;rt&lt;"bottom"lp&gt;&lt;"clear"&gt;', // Positions table elements
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
      "language": {
          "search": "_INPUT_",            // Removes the 'Search' field label
          "searchPlaceholder": "Search"   // Placeholder for the search box
      }
  });
  </code></pre>
  
  <p><strong>Current look</strong>
  <a href="https://i.stack.imgur.com/0KEfZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0KEfZ.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML Returned/Rendered</strong></p>
  
  <pre><code>&lt;div class="top"&gt;
      &lt;div id="dialPlanListTable_filter" class="dataTables_filter"&gt;
          &lt;label&gt;
              &lt;input type="search" class="form-control input-sm" placeholder="Search" aria-controls="dialPlanListTable"&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the search box is smaller than the one above (which will be removed once this one is styled) and is not left to the table.  I have looked at the <a href="https://datatables.net/" rel="nofollow noreferrer">https://datatables.net/</a> site and cant find the last few things i need.</p>
  
  <p>I'd prefer NOT to have to update my <code>.css</code> as i don't want to affect the reset of the site, just this page only so dont mind using <code>JQuery</code> to add styling. also the <code>input</code> is sat inside the <code>label</code> as shown in the <code>HTML</code> above</p>