<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>제목 없음</title>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position:
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>
<script language="javascript">
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>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="images/btnImgSearch.gif" />
</div>
</div>
</body>
</html>
출처 : 아마도 www.quirksmode.org -ㅗ-);
'웹표준' 카테고리의 다른 글
| 웹표준 테이블 관련 설명 (0) | 2011.01.18 |
|---|---|
| footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃 (0) | 2011.01.18 |
