Styling Input File with jQuery and CSS

As you know, file input looks different in every browser. But there is a solution to solve this annoying issue. I found an amazing tutorial about how to style input file fields with jQuery and CSS written by Trevor Davis. I changed a few things and created my own file upload field.

HTML markup

<div class="file-wrapper">
    <input type="file" />
    <span class="button">Choose a file</span>
</div>

jQuery

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var SITE = SITE || {};

SITE.fileInputs = function() {
  var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.button'),
      $fakeFile = $this.siblings('.file-holder');
  if(newVal !== '') {
    $button.text('File Chosen');
    if($fakeFile.length === 0) {
      $button.after('<span class="file-holder">' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};

$(document).ready(function() {
  $('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
});
</script>

Css

<style type="text/css">
.file-wrapper {
	position: relative;
	display: inline-block;
	overflow: hidden;
	cursor: pointer;
}
.file-wrapper input {
	position: absolute;
	top: 0;
	right: 0;
	filter: alpha(opacity=1);
	opacity: 0.01;
	-moz-opacity: 0.01;
	cursor: pointer;
}
.file-wrapper .button {
	color: #fff;
	background: #117300;
	padding: 4px 18px;
	margin-right: 5px;	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display: inline-block;
	font-weight: bold;
	cursor: pointer;
}
.file-holder{
	color: #000;
}
</style>

 

Demo »


Go Daddy


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.


6 comments

Medha Paliwal2015-03-05 10:23

Great tutorial.I also have an another example which is related to the customize file upload button.Check it out http://www.mybloggerlab.com/2013/04/how-to-host-css-or-javascript-files-in-blogger-using-google-drive.html

Michael2014-08-20 17:46

Thanks, I\'ve used this at first but I\'ve figured a little jquery plugin that helped me, it contains some callbacks which I needed, here is it if someone needed it : https://github.com/s43/Simple-File-Input

Chris2013-06-30 16:41

The coding here is different from the example. You need to change this: valArray = $val.split(\'\\\')\r\n\r\nto this: valArray = $val.split(\'\\\\\') In order to work properly. But thanks! It saved my sunday!!!! :)

Michael2013-06-27 01:18

Thank you very much for this; it gives me a way to apply a more professional look to forms. I am trying to apply styles to the :hover and :active states of this element. I've used css and jQuery in the attempt, but with no success. Any suggestions for this?

Jason Mullings2013-05-01 06:28

Great job! I could not find any other code which hides the browsers no file selected Text. I did not even need the jQuery section for my purposes. Slick!!!

Fabio2013-03-07 09:10

Thank you very much, it function perfectly! Cheers!

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the baby *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top