File Input Customization

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

File Input Customization
mikethedj4
Demo and Code - http://jsbin.com/umoSoPO/1/edit

When I was working on the HTML OnLive Debugger I noticed you couldn't really customize the input file button directly, but there are a few tricks on how you can have a custom file input button. I'm writing this tutorial cause I got a few people asking me how I was able to style the input file element. There's many ways to do this like everything else I'm just going to show you how I changed the input button's text to browse.

Starting Code:
Code: Select all
<style type='text/css'>
div#stylize {
	
}
</style>

<div id='stylize'>
	<input type='file' />
</div>
Using some CSS (color:red;) we can change the text color on "No file chosen" to whatever we want, and even customize the background (background:black;). If the value element within the css is change to just define all inputs we get the same effect, but we can't change anything of the button itself, not the value, not the styling, nothing. The reason why is the browser has default settings on how the button should be visible, and it's unchangeable we can't access it, at least not in today's code, but we can make our own styled button and when that button is clicked we can trigger it to click the input element. To do this will be using JQuery/Javascript.

First we need to make the file input element accessible, but not hidden, just invisible. now Hidden is when it's still there and the display properties can be adjusted but it's not actually embedded into the dom as it's not visible to be manipulated. It has to be visible to be manipulated. Adjusting the opacity can help, but we'll need 3 lines of code just for cross browser compatibility. Instead we'll be using visibility:hidden; to make out element invisible, and we'll adjust it's width and height to 0 that way we can still access it without it becoming a problem with whatever layout we choose to make. Next we just need to identify our elements. So our file input will have an id called filebrowser.
Code: Select all
<style type='text/css'>
input#filebrowser {
	visibility:hidden;
	width:0px;
	height:0px;
}
</style>

<div id='stylize'>
	<input id='filebrowser' type='file' />
</div>
Now that our input file element is invisible we can now embed a input button type element and begin styling that. Our input button's id will be "input#bbtn".

To save me time I decided to use the CSS Button Generator so I wouldn't have to write down a bunch of code. These generators are made to make development much faster and easier so take advantage of them, but it's always good to know, and understand the generated code so you can write, and create your own unique buttons whenever you want.
Code: Select all
<style type='text/css'>
input#filebrowser {
	visibility:hidden;
	width:0px;
	height:0px;
}

input#bbtn {
    cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
input#bbtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
input#bbtn:active {
	position:relative;
	top:1px;
}
</style>

<div id='stylize'>
	<input id='filebrowser' type='file' />
	<input id='bbtn' type='button' value='Browse' />
</div>
So now all we need to do is trigger our input file element.
Code: Select all
// Trigger Browse button click to trigger click out input file element
$("#bbtn").click(function() {
	$("#filebrowser").trigger('click');
});
So now here is our full code...
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Custom Browse Button</title>
<meta charset='utf-8'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
/* Makes the input file element invisible */
input#filebrowser {
	visibility:hidden;
	width:0px;
	height:0px;
}

/* Styles the browse button */
input#bbtn {
    cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
input#bbtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
input#bbtn:active {
	position:relative;
	top:1px;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
	// Trigger Browse button click to trigger click out input file element
	$("#bbtn").click(function() {
		$("#filebrowser").trigger('click');
	});
});
</script>
</head>
<body>
	<div id='stylize'>
		<input id='filebrowser' type='file' />
		<input id='bbtn' type='button' value='Browse' />
	</div>
</body>
</html>
Demo and Code - http://jsbin.com/umoSoPO/1/edit
1 post Page 1 of 1
Return to “Tutorials”