『<input type=”file”>』。サーバへファイルをアップする場合にこのような記述を行うかと思いますが、制作途中にCSSで要素のデザインを変更できないという事態に遭遇することがあるかもしれません。僕もこの問題に詰まったので対処法について備忘録として記事にしてみます。

クリックさせる偽物の要素や画像を用意して、本物は透明にして上に覆いかぶせる。そして、出力されたファイルパスはJavaScriptで<input type=”text”>の中に差し込む。参考になりました、感謝です。

さらにサクッとしてみた

僕の作っていたのは特殊なWebアプリケーションだったのでパスが出力されるフォームを省いたシンプル設計にしてみました。下の画像のように”ボタンをクリックするとファイル選択画面が立ち上がる。”これだけで良かったんですね。

ソースコード

<div id="fileinputs">
<form>
<input type="file">
<button>ファイル選択<button>
</form>
</div>

/*input*/
#fileinputs input {
    position:relative;
    opacity:0;
    z-index:2;
}

/*button*/
#fileinputs button {
    margin-top:-30px;
}