How to style button inside of file upload input

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:

1. Create a button and style the layout as you would like it to appear.
2. Position your <input type="file" /> absolutely over the top of your new button element.
3. Add a z-index to the element to make it one level above the styled button.
4. Set the input to have an opacity: 0;
5. Wire up the proper events described in the article to make the input function accordingly.

Answer 3

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");
    }

Answer 4

CSS only solution

You can use the file-selector-button CSS pseudo-element

::-webkit-file-upload-button{
  ..
}

more information