Question

我将输入文件设计为：

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

enter image description here

我想更改按钮的文字和颜色＆＃34;浏览..＆＃34;。你能帮助我吗？谢谢大家。

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

DEMO

Answer 2

这是非常多的浏览器体系结构和操作系统相关功能，无法更改。

使用叠加

但是你可以在其上叠加其他元素并隐藏默认外观。您也可以使用一些插件，为您执行此操作。

jQuery File Upload是一个能够做到这一点的插件。

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

Answer 3

它依赖于浏览器架构。你不能做太多。

仍然有一些关于stackoverflow的讨论

你应该看看这个

访问How to change the button text of <input type="file" />?

希望这有帮助

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

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来清除默认样式，并从头开始设计它。

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

5 个答案:

使用叠加