How to style button inside of file upload input - html

Question

Not sure how to style or change the text of the "Choose File" button inside of my file upload input field.
http://codepen.io/leongaban/pen/wrCLu
<input id="choose_file" type="file" name="datafile" size="40">
input {
padding: 10px 15px;
border: 0;
background: orange;
}
^ Here the background gets styled instead of the button.

Answer 1

As I told you in my comment you can simply create whatever layout and visuals you like to a button and create a file button then simply hide that file button and bind the event on the styled button to trigger the file button.
I've made this example for that purpose:
Codepen with custom file button

Answer 2

There are no native options for styling an input[type="file"] element. However, this article describes a cool (but hacky) trick you can use to accomplish this. Basically:
Create a button and style the layout as you would like it to appear.
Position your <input type="file" /> absolutely over the top of your new button element.
Add a z-index to the element to make it one level above the styled button.
Set the input to have an opacity: 0;
Wire up the proper events described in the article to make the input function accordingly.

Answer 3

CSS only solution
You can use the file-selector-button CSS pseudo-element
::-webkit-file-upload-button{
..
}
more information

Answer 4

Here is my straight-forward HTML 5 solution shown using an MVC Razor Form, but you could use a plain html form just as well. This solves the problem with the Input type=file not rendering the same in all browsers. You could style the browseBtn however you like by setting a background image for it. I tested this in IE 11, Firefox, and Chrome. IMO, the look of the default Chrome native control (shown in the question) is unacceptable.
Index.cshtml
<h2>Index</h2>
#using (Html.BeginForm("postFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div style="display:inline-block; margin-bottom:10px">
<input type="text" name="uploadControl" id="uploadControl"
style="width: 400px; height: 1.1em;" readonly="true" >
<button type="button" id="browseBtn" >Browse...</button>
</div>
<input type="file" name="upfile" id="upfile" style="display:none;" >
<button type="submit" id="uploadbtn" style="display:block">Click to upload</button>
<br><br>
#ViewBag.Message
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/UploadFile.js"></script>
UploadFile.js
$('#browseBtn').click(function () {
$('#upfile').first().trigger("click"); //cause the browse menu to pop up
});
$('#upfile').first().change(function (event) {
event.preventDefault();
var fileName = $('#upfile').val();
if (fileName && fileName.length > 0) {
$('#uploadControl').val(fileName);
}
});
HomeController.cs
public ActionResult postFile(HttpPostedFileBase upfile)
{
if (upfile != null && upfile.ContentLength > 0)
{
try
{
string path = Path.Combine(Server.MapPath("~/Images"),
Path.GetFileName(upfile.FileName));
//upfile.SaveAs(path);
ViewBag.Message = Path.GetFileName(upfile.FileName) + " uploaded successfully";
}
catch (Exception ex)
{
ViewBag.Message = "ERROR:" + ex.Message.ToString();
}
}
else
{
ViewBag.Message = "You have not specified a upfile.";
}
return View("Index");
}