如何仅使用 CSS 设置“选择文件”按钮的样式

Question

我想尝试设计这个：

 <input type="file" multiple>

我想要什么：我想改变它的颜色，也改变它的大小……

原文由 Balvant Ahir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

文件类型是本机元素，此后您无法更改它的外观。相反，您可以隐藏在某些元素的后面。

 <div>
  Choose File
 <input type="file" class="hide_file">
</div>

 div{
  padding:5px 10px;
  background:#00ad2d;
  border:1px solid #00ad2d;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
}

参考 这里

原文由 Santhosh Kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以简单地在 css 中使用 ::-webkit-file-upload-button 并为您的“选择文件”按钮设置样式。

原文由 Mohd Shahid 发布，翻译遵循 CC BY-SA 4.0 许可协议