［CSS］input type=”file”のファイルアップロードボタンのデザイン変更

WEBサイトとかでファイルをアップロードするためのhtmlのファイル選択ボタン。
これのデフォルトのデザインってダサいじゃないですか。
そこでおしゃれに変えたい！ってなっても一筋縄ではいかないこのファイルボタン。

↓デフォルト。ダサいですね～

ところがどっこいこちらをオリジナルデザインにする方法があります。そりゃありますよね。

まずは通序盤htmlソース

<input type="file">

ですね基本的には。name等はデザインに関係ないので省きます。

そしてこちらがオリジナルデザインバージョンのhtmlです。

<div class="originalFileBtn ">
	YOUR FILE
	<input type="file">
</div>

上記の準備がOKでしたら、cssでデザインを変更します。

.originalFileBtn {
    border: 3px solid;
    display: inline-block;
    padding: 2px 1em;
    position: relative;
}
.originalFileBtn input[type="file"] {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

↓オリジナルバージョン。デザインは自由自在です。