Question

如何将按钮背景图像设置为<input type="file">？

这是我的HTML代码：

＆＃13;

<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>

＆＃13;

有一种方法可以仅将背景图像设置为按钮，而不是选定的图像文本视图吗？

Answer 1

您可以构建一个可以轻松设置样式的虚假输入。

＆＃13;

// 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();
  });
});

＆＃13;

#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 */

＆＃13;

<input type="file" id="real" />
<input type="button" value="Open files" id="fake-button" />
<input type="text" id="fake-label" />

＆＃13;

现在您可以单独设置按钮和标签的样式。

将背景图像设置为输入类型的按钮=＆＃34;文件＆＃34;基础css

1 个答案: