如何在 html 中设置输入类型=文件的样式？ [复制]

Posted 2023-03-06

【中文标题】如何在 html 中设置输入类型=文件的样式？ [复制]

【英文标题】：How to style a input type=file in html? [duplicate]

【发布时间】：2013-09-05 04:46:49

【问题描述】：

我做了一些研究，发现设置输入 type=file 的样式可能很困难。但是，我意识到当您想将视频上传到网站时，youtube 会显示一个漂亮的按钮。 （可能需要登录：http://www.youtube.com/upload）。 所以基本上它允许用户点击按钮，选择一个文件，然后上传。 我不确定这是如何实现的，而不是使用丑陋的<input> 标签？或者有谁知道制作漂亮的文件上传界面的其他好方法？

【问题讨论】：

见:: ***.com/questions/4909228/style-input-type-file

***.com/questions/4909228/style-input-type-file

@Sudhir 我已经阅读了这些主题，但这些主题是针对输入字段的，我只要求提供上传按钮（没有文本字段），请参阅我发布的 youtube 链接。你分享的话题并没有解决我的问题

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

看看这个哥们，它可能对你有帮助***.com/a/16491593/2261259

【参考方案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;