Home  »     »     »  How to change the text of an HTML File control's browse button - CSS work around

How to change the text of an HTML File control's browse button - CSS work around

Monday, March 3, 2014

How to customize the text of an HTML File control's browse button

HTML file element is used to upload files to the server. Usually the File element have a button having texts like "Browse", "Choose" or "Choose file" depending on the browser you use. If you want to customise the Browse button text, there is a sample hack code on net, which uses some CSS work arounds to display an image over a browse button, which on clicked will popup the file selector window.
[Courtesy : quirksmode.org ]


Here is the code for that.



<html>
<head>
<script>
var W3CDOM = (document.createElement && document.getElementsByTagName);

// call this function on body onload
function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');

// replace the image file with yours
image.src='images/button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
</script>



<style>
div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>

</head>
<body onload="initFileUploads()">
<div class="fileinputs">
<input type="file" class="file">
</div>
</body>
</html>

The full expanation to the above given code is given in quirksmode.org, to read more please visit:
http://www.quirksmode.org/dom/inputfile.html



How to link to this page?
If you wish to link to this page from your website, simply Copy and paste the above HTML code to your web page. It will appear on your page as:
How to change the text of an HTML File control's browse button - CSS work around.




Share this!




comments powered by Disqus

This Weeks 7 Popular Posts


Subscribe to Recent Posts by Email
Stay connected to CROZOOM with regular Email notices of new Techie articles and IT Jobs. Updates will be delivered to your Inbox as soon as they are posted online.

Enter Your Email Address:  

Delivered by FeedBurner   RSS Feed

Search this Blog   



Urgent Openings for PHP trainees, Andriod / IOS developers and PHP developers in Kochi Trivandrum Calicut and Bangalore. Please Send Your updated resumes to recruit.vo@gmail.com   Read more »