自定义上传按钮

Question

嗨,我只是想知道如何创建自己的自定义文件上传按钮,因为我能做的最好的是

而我想要实现的是

如果有这样做我会非常感激,并且我可以得到答案解释如何使用代码而不是答案与链接到允许您下载按钮或类似的网站的链接,谢谢:)

Answer 1

虽然这些答案中的一些会产生看起来像你希望它起作用的东西,但是当它们试图按照你期望的方式运行时它们会分解.文件输入的样式不直接,您将无法尝试.但是,有一个技巧.

诀窍是将输入的不透明度变为0,然后将其下方的背景更改为您想要的按钮样式.

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }

<div class="file_button_container"><input type="file" /></div>

Answer 2

我想您也可以尝试这样做:
创建一个<label for="X"></label>可以使用CSS轻松设置样式的附加元素

<div class="container">
  <label for="upload" class="uploadButton">Upload</label>
  <input type="file" name="upload" id="upload">
</div>

喜欢

.container {
  position: relative;
}
.uploadButton {
  height: 25px;
  width: 66px;
  display: block;
  cursor: pointer;
  background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
  display: block;
  width: 66px;
  height: 25px;
  clip: rect(0px 0px 0px 0px);
  position: absolute;
  left: 0;
  top: 0;
}

<form>
  <div class="container">
    <label for="upload" class="uploadButton"></label>
    <input type="file" name="upload" id="upload" required />
  </div>
  <hr/>
  <button type="submit">Submit</button>
</form>