• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

テキストフォームやラジオボタンなどは、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 要素の余白、背景色や文字色、ボーダーなどを調整する仕掛けのようです。

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください