html - 在输入文件的背景中添加文本

Question

我有这个用于上传文件的简单表单:

<form method="post" action="">
  <input id="holder" type="file" style="padding: 5px; width:100%; height:100px; border: 5px dashed #ccc">
</form>

http://jsfiddle.net/e98b2w7s/

但现在我需要一种方法在虚线区域内的背景中添加此文本:

"or Drag and Drop your file here"

有办法吗？

Answer 1

您最好将样式设置为您的表单，在这种情况下您可以只提供 form itself the background image一些更清洁的解决方案:

编辑:删除了背景图像以显示文本而不是更清晰的方法。

form {
  padding: 5px;
  width: 100%;
  height: 100px;
  border: 5px dashed #ccc;
}

form h1 {
  text-align: center;
  color: #ccc;
}

<form method="post" action="">
  <input id="holder" type="file">
  <h1>Drag &amp; Drop Files Here</h1>
</form>

您不需要使用背景图片，但是，您可以只创建一个显示“拖放此处”的 h1，然后使用 SVG 或 FontAwesome 添加云和/或箭头图标。