ファイル・アップロードinput type="file"要素のスタイリング

2009/07/14 15:09更新
TAGS: ファイルアップロード | input | file | 外観

HTMLのファイル・アップロード　コンポーネントの外観のスタイリングについて。

原文（英語）はこちら：CSS2/DOM - Styling an input type="file"

参考までに。

１）HTML/CSSによるスタイリング
InputFileCss.html
<html>
<head>
<style type="text/css">

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>
<div class="fileinputs">
 <input type="file" class="file" onchange="x.value = this.value;"/>
 <div class="fakefile">
  <input id="x" />
  <img src="search.gif" />
 </div>
</div>
</body>

</html>

※search.gif画像が適当な場所においておく必要があります。

解説は原文まで。

２）JavaScript/CSSによるスタイリング
上のような書き方で、主要ブラウザーではほとんど動作しますが、古いブラウザーの場合、例えば、以下のブラウザーの場合、CSSが思うとおりに動作しません。

Netscape 4の表示：


Explorer 4の表示：


Netscape 3の表示：


JavaScriptで同じような機能を実現する例です。
JavaScriptの場合、古いブラウザーで動作しなくても、<input type="file">がそのまま表示しますので、レイアウトを崩してしまうことがありません。
InputFileJavaScript.html
<html>
<head>
<style type="text/css">

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>
<div class="fileinputs">
 <input type="file" class="file" />
</div>

<script type="text/javascript" lang="javascript">
var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
alert("1");
    if (!W3CDOM) return;
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    fakeFileUpload.appendChild(document.createElement('input'));
    var image = document.createElement('img');
    image.src='search.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;
        }
    }
}
initFileUploads();
</script>
</body>

</html>

※search.gif画像が適当な場所においておく必要があります。

原文は詳しく書いてありますので、解説は省略します。

著者について
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Sponsored Link


コメント

ユーザ名 (required)

Eメール (will not be published) (required)

Webサイト

記事への評価

  • 関連記事