在<input type="file">之前，添加一个图像，并且<input style="position:absolute">，它将占据<input type="file">的空间 对file元素使用下面的CSS 位置:相对; 透明度:0; z - index: 99;

对我来说，它不工作自定义文本与bootstrap文件样式。它有助于按钮装饰，但文本是奇怪的改变，在与css摔跤之前，我尝试以下:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap- filstyle使用名为buttontext的类将组件渲染为span，因此当文档加载时只需更改文本。很简单，它必须在所有浏览器上工作。

干杯

I did it like this for my project: .btn-outlined.btn-primary { color: #000; } .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color:#000; } .btn-block { display: block; width: 100%; padding: 15px 0; margin-bottom: 10px; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-align: center; } <label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label> <input type="file" id="fileUpload"style="display: none;">

你可以放一张图片，像这样做:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

警告: 在IE9和IE10中，如果你通过javascript触发文件输入中的onClick，表单将被标记为“危险”，不能用javascript提交，不确定它是否可以传统地提交。

这是一个可能对你有帮助的替代解决方案。这将隐藏按钮外的文本，将其与div的背景色混合。然后你可以给div一个你喜欢的标题。

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>

使用Bootstrap FileStyle，它用于样式化表单的文件字段。它是一个名为Twitter Bootstrap的基于jquery的组件库的插件

示例用法:

包括:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

通过JavaScript:

$(":file").filestyle();

通过数据属性:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">