每个浏览器都有自己的控件呈现方式，因此您不能更改控件的文本或方向。

如果你想要一个html/css的解决方案，而不是Flash或silverlight的解决方案，你可能想尝试一些“类型”的技巧。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就我个人而言，因为大多数用户坚持使用他们所选择的浏览器，因此可能习惯于在默认呈现中看到控件，如果他们看到不同的内容(取决于您所处理的用户类型)，他们可能会感到困惑。

这应该可以工作:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

这是不可能的。否则，你可能需要使用Silverlight或Flash上传控件。

$(document).ready(function () { $('#choose-file').change(function () { var i = $(this).prev('label').clone(); var file = $('#choose-file')[0].files[0].name; $(this).prev('label').text(file); }); }); .custom-file-upload{ background: #f7f7f7; padding: 8px; border: 1px solid #e3e3e3; border-radius: 5px; border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> can you try this <label for="choose-file" class="custom-file-upload" id="choose-file-label"> Upload Document </label> <input name="uploadDocument" type="file" id="choose-file" accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />

使用标签的for属性进行输入。

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

下面是获取上传文件名称的代码

$(" #文件").change(函数(){ 文件名= this.files[0].name; console.log(文件名); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div > <label for="files" class="btn">选择图像</label> <input id="files" style="visibility:hidden;" type="file"> . < / div >

这可能会在将来帮助别人，你可以为输入设置你喜欢的标签，把你想要的任何东西放在里面，隐藏输入，显示为none。

它在iOS的cordova上完美地工作

<link href=“https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css” rel=“stylesheet”/> <label for=“imageUpload” class=“btn btn-primary btn-block btn-outlined”>Seleccionar imagenes</label> <输入类型=“文件” id=“图像上传” 接受=“图像/*” 样式=“显示：无”>