<input type="file" value="Browse" name="avatar" id="id_avatar" />

我试图修改该值,但它不起作用。如何自定义按钮文本?


当前回答

如果你使用rails,有问题应用它,我想从@Fernando Kosh发布的原始答案中添加一些提示

下载zip文件,复制bootstrap- filstyle .min.js ke文件夹app/assets/javascripts/ 打开你的application.js并在下面添加这一行 //= require bootstrap- filstyle .min 打开你的咖啡,加入这条线 $(“文件”)。filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: "你的文本在这里",icon: false});

其他回答

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

这是一个JQuery插件,用于更改输入文件元素的按钮文本。

示例HTML:

<input type="file" id="choose-file" />

JS示例:

$('#choose-file').inputFileText({
    text: 'Select File'
});

结果:

如果你使用rails,有问题应用它,我想从@Fernando Kosh发布的原始答案中添加一些提示

下载zip文件,复制bootstrap- filstyle .min.js ke文件夹app/assets/javascripts/ 打开你的application.js并在下面添加这一行 //= require bootstrap- filstyle .min 打开你的咖啡,加入这条线 $(“文件”)。filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: "你的文本在这里",icon: false});

隐藏文件输入。创建一个新的输入来捕捉点击事件,并将其转发到隐藏的输入:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

这是一个可能对你有帮助的替代解决方案。这将隐藏按钮外的文本,将其与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>