[CSS]フォームのinput type=fileのボタンデザインを変更する方法

CSSプロパティ

2013.12.01

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

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

オリジナルボタンのデザインサンプル
フォームの用意

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

.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;
}

.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>

ファイルを選択

</div>

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

ファイルを選択

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

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

参考ページ
input type=”file” なやつを独自にデザインする方法