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.
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
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:
<input type="file" /> absolutely over the top of your new button element.z-index to the element to make it one level above the styled button.opacity: 0;CSS only solution
You can use the file-selector-button CSS pseudo-element
::-webkit-file-upload-button{ .. } 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"); } 