<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
当前回答
我知道,没有人要求它,但如果有人使用bootstrap,它可以通过标签和CSS伪选择器改变。
更改按钮文本:
.custom-file-label::after {
content: "What's up?";
}
更改字段文本:
<label class="custom-file-label" for="upload">Drop it like it's hot</label>
这是小提琴。
其他回答
隐藏文件输入。创建一个新的输入来捕捉点击事件,并将其转发到隐藏的输入:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="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/
这是一个JQuery插件,用于更改输入文件元素的按钮文本。
示例HTML:
<input type="file" id="choose-file" />
JS示例:
$('#choose-file').inputFileText({
text: 'Select File'
});
结果:
下面是一个用纯HTML和javascript“改变”文件类型输入文本的方法:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
只有CSS和bootstrap类
< =铁路”链接stylesheet " href = " https://cdn.jsdelivr.net/npm/bootstrap@4 6。0 /区/ css / min bootstrap。css”诚信=“sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L - Z6nronJ3oUOFUFpCjEUQouq2 + l”crossorigin =“匿名”> <div class="col-md-4 inputting -group"> <输入类别=“form控制”类型=“文本”/> < div级= input-group-btn”> <标签for=“文件” <输入id=“文件”类型=“文件”/> < / div > < / div >