HTML file upload “no file selected” text style

Question

I am building a html form that needs file upload. While I got the file upload part working, I am unable to get the styling of form upload button and " No file selected" text.

My desired markup is

Is there a way to do it?

PS: Please ignore the green text ( "Upload a screen shot"). I have that working.

Current behavior the button and the "no file chosen" is in the same line.

HTML Code:

<div class="formField">
   <label for="fileToUpload">Upload a screen shot (optional) </label>
   <input type="file" name="fileToUpload" id="fileToUpload"/> 
</div>

Answer 1

File inputs can't be styled with CSS alone. You'll need to use a jQuery plugin that makes a custom file upload button that can be styled with CSS.

A good one is called NiceFileInput.

To use:

1. Include jQuery (if you don't already have it) and nicefileinput.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/your_path/jquery.nicefileinput.min.js"></script>

Download the file from here.

2. Bind it to the element(s) you want. This binds it to all file inputs:

<script type="text/javascript">
$(document).ready(function() {
    $("input[type=file]").nicefileinput();
});
</script>

3. Customize it with CSS

.NFI-wrapper {
    // the container div
}
.NFI-button {
    // the button div element
}
.NFI-filename {
    // the text input element which collects and shows the value
}