[CSS] ファイルアップロードボタンをデザイン

フォームの実装でファイルアップロードボタンを組み込む際、通常だと表示を変更することはできません。

<input id="file_upload" name="file_upload" type="file" />

のように書いた場合、例えばChromeだと下の画像みたいな表示になります。

ファイルを選択

 

input要素にスタイルを効かせようとしても、margin指定くらいしか見てくれず、これはどうしようもないのかなーと思っていたところ、他のサイトさんを見ているとちらほら、見慣れない「ファイルを選択」ボタンを使っているところがあります。

これは・・・と思い、cssを探ってみたところ、ボタンの上にopacityの指定を0にしたinputをかぶせるというハックで対応していることがわかりました。

ボタンをクリックすると、見えないボタン(=ファイルアップロードのinput)をクリックしていることになり、ファイル選択の画面が表示される、という流れです。

 

ということで、サンプルを作ってみました。

<div class="button_wrapper">
    <div class="button">
    ファイルを選択
    </div>
    <input id="file_upload" name="file_upload" type="file" />
</div>

 

.button_wrapper {
    position: relative;
}
.button_wrapper .button {
    width: 150px;
    height: 150px;
    color: #fff;
    line-height: 150px;
    text-align: center;
    background: #666;
}
.button_wrapper input {
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    opacity:0;
    position: absolute;
    cursor: pointer;
}

 

表示させると以下のようになると思います。
(ファイルはアップロードできませんが、選択画面まではいけます)

 

ファイルを選択

 

opacityがうまく動かない古いブラウザだと問題が出るかもしれませんが、多くのブラウザで対応したやり方だと思います。

ファイルアップロードボタンもデザインしたい!という方はお試しあれ。