プロ生ちゃんとお勉強するよ~

プロ生ちゃんと一緒にプログラミングをお勉強できるサイトです。

input type='file'のデザインを変更する

<input type="file" />のデザインの変更方法についてお勉強するね。

<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"へのデザインの適用方法について解説しました。わかったかなぁ~?

本キャラクターに関する著作権およびその他一切の権利は、プログラミング生放送および、それらの関連企業・関係者に帰属しています。これは、著作権およびその他一切の権利を放棄・譲渡するものではありません。





プロ生ちゃんとお勉強するよ~

プロ生ちゃんと一緒にプログラミングをお勉強できるサイトです。