如何在html中样式化input type=file？

Question

我做了一些研究，发现很难样式化input type=file。然而，我发现当你想上传视频到YouTube时，它会显示一个漂亮的按钮。（可能需要登录：http://www.youtube.com/upload）。 基本上，它允许用户点击按钮、选择文件并进行上传。
我不确定这是如何实现的，而不是使用丑陋的标签？还是有其他好的方法来制作漂亮的文件上传界面吗？

- Allan Jiang

---

请参考以下链接以了解如何美化<input type="file">元素的样式：https://dev59.com/9m445IYBdhLWcg3wWI6L - Sudhir Bastakoti

https://dev59.com/9m445IYBdhLWcg3wWI6L - metalfight - user868766

@Sudhir，我已经阅读了那些帖子，但那些是针对输入字段的，我只是要求一个上传按钮（没有文本字段），请参考我发布的YouTube链接。你分享的那些帖子并不能解决我的问题。 - Allan Jiang

@dTDesign 谷歌没有解决我的问题。我知道有一个解决方法，可以将真实的文件输入设置为不透明度=0，并在其上放置一个假文件来伪造样式，但这不是我的问题。我想要一个单一的按钮来上传文件。 - Allan Jiang

看这个，伙计，它可能会对你有所帮助。https://dev59.com/VnA75IYBdhLWcg3wkJ71#16491593 - shankri

Answer 1

LIVE DEMO

<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>

<input id="uploadImage" type="file" />

#imageDrop{      
  background:#fff;
  width:300px;
  height:180px;
  font-size:20px;
  font-style:italic;
  border-radius:18px;
  border:2px dashed #444;
}

#uploadImage{
  visibility: hidden;
  height:0px;
  width: 0px;
}

- Roko C. Buljan