<input type="file" />は、デフォルトでは以下のようなデザインだよね。 今回は、このデザインを変更する方法についてお勉強するね。
それでは、この256 x 256のイメージをbackground-imageに設定してみます。
<html>
<head>
<!style>
.test {
width: 256px;
height: 256px;
background-image: url('./pronama_open_image.png');
}
</style>
</head>
<body>
<input type="file" class="test" />
</body>
</html>
う～ん、やっぱりそうなっちゃうよね～(´-ω-`)
予想通りに、「参照」ボタンと「ファイルが選択されていません」が被ってしまっています。しかも．．．大きくなってる～!!
実は、この「参照」ボタンや、「ファイルが選択されていません」の表示は、文字色ぐらいは変えることはできるのですが、基本的にCSSでは変更する手段がありません。
でも、安心してください。CSSでスタイルを適用することはできないですが、display: none;で消すことはできます。
では、消してみますね。
<html>
<head>
<!style>
.test {
display: none;
width: 256px;
height: 256px;
background-image: url('./pronama_open_image.png');
}
</style>
</head>
<body>
<input type="file" class="test" />
</body>
</html>
あれれ～何も出てこない。そうです。inputタグ自体にdisplay: none;を適用しているので、何も出なくなります。 しかしながら、「参照」ボタンや「ファイルが選択されていません」の表示を消すことはできました。
でも、このままでは、ファイルの選択ができませんので何とかしなければなりません。
ここからが、本題になります。inputタグには、lableを適用する事ができますので、とりあえずラベルを適用してみます。
<html>
<head>
<!style>
.test {
display: none;
width: 256px;
height: 256px;
background-image: url('./pronama_open_image.png');
}
</style>
</head>
<body>
<label>
ラベル
<input type="file" class="test" />
</label>
</body>
</html>
あたりまえですが、ラベルが出てきました。
それでは、この「ラベル」をクリックしてみましょう。すると、ファイル選択ダイアログが表示されるのです。
inputタグは非表示にしましたが、ラベルをクリックすることで、実はファイル選択ダイアログが表示できるのです。
この仕組みを利用して、inputタグは非表示にしますが、ラベルの中にdiv要素を配置してdiv要素に対してスタイルを適用してみます。
<html>
<head>
<!style>
.test {
display: none;
}
.test2 {
width: 256px;
height: 256px;
background-image: url('./pronama_open_image.png');
}
</style>
</head>
<body>
<label>
<div class="test2"></div>
<input type="file" class="test" />
</label>
</body>
</html>
やったね！！ デザインが適用できました。もちろん、この画像(divタグ)をクリックすると、ファイル選択ダイアログが表示されます。
labelの中には、imgタグも置けるのでdivでなくてもimgでも同じようにできるよ!!
input type="file"へのデザインの適用方法について解説しました。わかったかなぁ～？
<input type="file" />のデザインの変更方法についてお勉強するね。