PDA

View Full Version : CSS buttons



SteveH
Mar 17th, 2010, 12:52 PM
Hello

I am trying to use a more attractive 'attach' button for an online form I have.

I have two 'test' sites which show the button.

The button looks OK here (in Safari and IE 8), but it does not show the name of the file, once uploaded, in the upload field:

http://proofreading4students.com/Button_Test/button_test.html

On the other hand, the button does not look OK here (again, either in Safari or IE 8), but it does show the name of the file, once uploaded, in the upload field:

http://proofreading4students.com/Button_Test/button_test1.html

What I would like to do, eventually, is use my own image(s), but I just wanted to ensure the script worked beforehand.

Thanks.

Steve

abduraooft
Mar 17th, 2010, 01:23 PM
Check the 5th point given at http://www.quirksmode.org/dom/inputfile.html

SteveH
Mar 17th, 2010, 03:30 PM
Hello Abduraroot

Thanks for your post.

This sodes not show the file in the field, either:


<html>
<head>

<style type="text/css">


#divinputfile{

background:url(upload_file.gif) no-repeat 100% 1px;

height:28px;

width:385px;

margin:0px;

}#divinputfile #filepc{

opacity: 0.0;

-moz-opacity: 0.0;

filter: alpha(opacity=00);

font-size:18px;

}

#fakeinputfile{

margin-top:-28px;

}

#fakeinputfile #fakefilepc{

width:265px;

height:22px;

font-size:18px;

font-family:Arial;

}

</style>

<script>

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='pix/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>
</head>

<body>

<body>

<div id="divinputfile"> <input name="filepc" type="file" size="30" id="filepc" onchange="document.getElementById(’fakefilepc’).value = this.value;"/><div id="fakeinputfile"><input name="fakefilepc" type="text" id="fakefilepc" /></div>

</div>

</body>
</html>

</div>


I am just wondering, if I can get this to work, I don't really need a 'browse' button, do I?

Cheers

Steve