Making a form look like bootstrap button - html

Question

Hi guys so currently i have a simple button in bootstrap which looks like :
class="btn btn-success btn-block btnrec"
I then was trying to make my form buttons look like that, however its not working correctly , anyone know why?
My attempt so far:
<form action="" method="post" enctype="multipart/form-data">
<input class="btn btn-success btn-block btnrec" type="file" name="file">
<input class="btn btn-success btn-block btnrec"type="submit" name="submit">
</form>
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
Thanks
Tried this:
<form action="" method="post" enctype="multipart/form-data">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<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());'>
</a>
<input class="btn btn-success btn-block btnrec"type="submit" name="submit">
</form>

Answer 1

Bootstrap distinguishes inputs based on their type. That way it knows to style a [type='text'] differently from a [type='submit']. In this case, Bootstrap doesn't have styling for input[type='file'] built in to the library.
This answer has roughly equivalent styling for that element that you can add yourself.

Answer 2

Following this links examples https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3
<!-- support IE8 -->
<form action="" method="post" enctype="multipart/form-data">
<span class="btn btn-success btn-block btnrec btn-file">
Upload <input type="file" name="file">
</span>
<input class="btn btn-success btn-block btnrec" type="submit" name="submit">
</form>
<!-- don't care about IE8 -->
<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-success btn-block btnrec btn-file">
Upload <input style="display: none;" type="file" name="file">
</label>
<input class="btn btn-success btn-block btnrec" type="submit" name="submit">
</form>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>