Upload HTML file "no file"
I am creating an html form that requires a file upload. Although I got the file upload part, I cannot get the form upload button style and the text "No files".
My desired markup
Is there a way to do this?
PS: Please ignore the green text ("Upload Screenshot"). It works for me.
The current behavior of the button and "no file selected" is on 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>
+3
source to share
1 answer
File inputs cannot be written with CSS alone. You will need to use a jQuery plugin that creates a custom file upload button that can be written with CSS.
The good one is called NiceFileInput .
For 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 links it to all files:
<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
}
+5
source to share