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

其他回答

我知道,没有人要求它,但如果有人使用bootstrap,它可以通过标签和CSS伪选择器改变。

更改按钮文本:

.custom-file-label::after {
  content: "What's up?";
}

更改字段文本:

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

这是小提琴。

在Bootstrap +4.5中,你可以简单地将这个添加到你的代码中:

.custom-file-input ~。{后custom-file-label:: 内容:“您的自定义文本…”; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="匿名"> < div class = "定义文件”> <input type="file" class="custom-file-input"> <label class="custom-file-label">自定义占位符 < / div >

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

示例HTML:

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

JS示例:

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

结果:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

更多的http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

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

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