スポンサード

「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。

テキストフォームやラジオボタンなどは、CSS 3のプロパティを利用すればかなり自由にデザインを変更できますが、ファイルアップロードボタンのデザイン変更はかなり難しいので、非常に使えるカスタマイズです。

オリジナルボタンのデザインサンプル

ボタンのデザインサンプルは以下の通りです。

.file {
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding: 1em;
    border: 1px solid #dd0000;
    background: #dd0000;
    color:#fff;
}

.file input[type="file"] {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    font-size: 100px;
    cursor: pointer;
}

フォームの用意

今度はHTML 側でフォームを用意します。

<div class="file">
	ファイルを選択
	<input type="file">
</div>

試しに作ったアップローダーボタンがこちらです。


input[type=file] を opacity:0 で透明度0 にして、file 要素の余白、背景色や文字色、ボーダーなどを調整する仕掛けのようです。

以下のページで詳しい解説が紹介されていますので、合わせて参考にしてみてください。

スポンサード