ボタン背景画像を<input type="file">に設定するにはどうすればよいですか？背景画像を入力タイプ= "ファイル"ファンデーションのボタンに設定する
これは私のhtmlコードです：
<div class="large-9 columns small-9 columns" style="margin-top:2%;">
<input type="file" name="file" id="file" onchange="changePicture()" class="btn btn-file">
</div>ボタンだけにではなく、選択した画像のテキストビューに背景画像を設定する方法はありますか？
簡単にスタイルを設定できる偽の入力を作成できます。
// do stuff after page load
window.addEventListener("DOMContentLoaded", function()
{
// bind event listener to the fake button
document.getElementById("fake-button").addEventListener("click", function()
{
// bind event listener to the real button
document.getElementById("real").addEventListener("change", function()
{
// extract and place the name of the file into the fake label field
document.getElementById("fake-label").value = this.files[0].name;
});
// simulate a click event on the real button
document.getElementById("real").click();
});
});#real {
display: none;
}
#fake-button {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/40px-Mozilla_Firefox_logo_2013.svg.png");
}
/* Just a random image from the internet */<input type="file" id="real" />
<input type="button" value="Open files" id="fake-button" />
<input type="text" id="fake-label" />今、あなたは別に、ボタンやラベルのスタイルを設定することができます。
探しているものは何ですか？ – Tushar
ボタンの隣にあるテキストではなくボタンにのみイメージを設定したい場合、この入力には選択されたイメージ名のワンタッチの第2テキストビューが2つあります。 – foo
入力ファイルにはスタイルの制限があります。ボタンとテキストが違うわけではありません。 – Tushar