将背景图像设置为输入类型=“文件”的按钮。基础css [英] Set background image to button of input type="file" foundation css

问题描述

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

这是我的html代码：

 < div class =large -9 columns small-9 columnsstyle =margin-top：2％;> < input type =filename =fileid =fileonchange =changePicture（）class =btn btn-file>< / div>  

有一种方法可以仅将背景图像设置为按钮而不是所选图像文本视图？ p>

解决方案

您可以建立一个可以轻松设定的假输入。

  #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）;} / *只是来自互联网的随机图片* /  

  input type =fileid =real/>< input type =buttonvalue =Open filesid =fake-button/>< input type =textid = -label/>  

标签。

How can I set a button background image to an <input type="file">?

This is my html code:

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

There is a way to set background image only to the button, not to the selected image text view?

解决方案

You can build a fake input which you can style easily.

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

Now you can style the button and the label separately.

这篇关于将背景图像设置为输入类型=“文件”的按钮。基础css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！