title: Making a form look like bootstrap button
body: <p>Hi guys so currently i have a simple button in bootstrap which looks like : </p>
  
  <pre><code>class="btn btn-success btn-block btnrec"
  </code></pre>
  
  <p>I then was trying to make my form buttons look like that, however its not working correctly , anyone know why?</p>
  
  <p>My attempt so far: </p>
  
  <pre><code>&lt;form action="" method="post" enctype="multipart/form-data"&gt;
      &lt;input class="btn btn-success btn-block btnrec" type="file" name="file"&gt;
      &lt;input class="btn btn-success btn-block btnrec"type="submit" name="submit"&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can see, the submit was works fine, looks like the bootstrap button but the one above, which is the choose file "File not found" etc does not, this for me uploading a pic to the db, but just want to make the buttons look nice :0 </p>
  
  <p>Thanks </p>
  
  <p>Tried this: </p>
  
  <pre><code>&lt;form action="" method="post" enctype="multipart/form-data"&gt;
      &lt;a class='btn btn-primary' href='javascript:;'&gt;
          Choose File...
          &lt;input type="file" name ="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'&gt;
      &lt;/a&gt;
      &lt;input class="btn btn-success btn-block btnrec"type="submit" name="submit"&gt; 
  &lt;/form&gt;
  </code></pre>