如何更改输入文件的按钮浏览的文本和颜色？

Question

我将输入文件设计为：

  <input type="file" name="file" id="file" size="52"   />

我想更改按钮“浏览…”的文本和颜色。你能帮助我吗？谢谢大家。

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

Answer 1

外观和功能还可以，但这不是您真正期望的。认为这对你有帮助。

  <input type="text" id="fileName" readonly="readonly" >
 <div class="file_input_div" style="display: inline;">
 <input type="button" id="button" value="Open"/>
 <input type="file"  style="opacity:0; position:relative; left:-40px;"  onchange="javascript: document.getElementById ('fileName') . value = this.value"/>
 </div>

CSS

 ​#button{
position: relative;
left:-1px;
background-color:#446655;
}​

演示

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

Answer 2

有伪元素 ::file-selector-button 。

像这样使用它：

 input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

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