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

Question

我将输入文件设计为：

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

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

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;
}​

演示

Answer 2

它取决于浏览器架构。你对此无能为力。

在stackoverflow上仍然有一些关于这个的讨论

你应该检查一下

访问如何更改 <input type="file" /> 的按钮文本？

希望这可以帮助

PS：从下次开始，请确保您没有发布重复的问题

Answer 3

它是非常依赖于浏览器架构和操作系统的特性，并且无法更改。

使用覆盖

但是您可以在此之上覆盖其他元素并隐藏默认外观。你也可以使用一些插件来为你做这件事。

jQuery File Upload就是这样一款插件。

演示：http ://blueimp.github.com/jQuery-File-Upload/

Answer 4

请试试这个： https ://codepen.io/claviska/pen/vAgmd

<div class="input-group">
            <label class="input-group-btn">
                <span class="btn btn-primary">
                    Browse&hellip; <input type="file" style="display: none;" multiple>
                </span>
            </label>
            <input type="text" class="form-control" readonly>
        </div>



$(function() {
 $(document).on('change', ':file', function() {
var input = $(this),
    numFiles = input.get(0).files ? input.get(0).files.length : 1,
    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});

 // We can watch for our custom `fileselect` event like this
$(document).ready( function() {
  $(':file').on('fileselect', function(event, numFiles, label) {

      var input = $(this).parents('.input-group').find(':text'),
          log = numFiles > 1 ? numFiles + ' files selected' : label;

      if( input.length ) {
          input.val(log);
      } else {
          if( log ) alert(log);
      }

  });
});

});

Answer 5

你可以在这里找到它：
http
://www.quirksmode.org/dom/inputfile.html 这篇文章太长了，不能在这里复制。

基本上，您将设计一个input[type=text]（用户将看到的），并input[type=file] opacity = 0在input[type=text].

希望这能有所帮助。

仅对于 webkit 浏览器，您可以使用CSS属性-webkit-appearance清除默认样式并从头开始对其进行样式设置。