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>


<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 {

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


<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;
	color: #000;


Demo »


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS


Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style


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


Learn how to use the pie plugin for Flot charts.


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

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 :

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 apple *

Find us on Facebook



Back to Top