<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
当前回答
只有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 >
其他回答
隐藏文件输入。创建一个新的输入来捕捉点击事件,并将其转发到隐藏的输入:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
在<input type="file">之前,添加一个图像,并且<input style="position:absolute">,它将占据<input type="file">的空间 对file元素使用下面的CSS 位置:相对; 透明度:0; z - index: 99;
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;">
你可以简单地添加一些css技巧。你不需要javascript或更多的输入文件,我保持现有的值属性。您只需要添加css。你可以试试这个解决方案。
.btn-file-upload { 宽度:187 px; 位置:相对; } .btn-file-upload:{后 内容:attr(价值); 位置:绝对的; 上图:0; 左:0; 底部:0; 宽度:48%; 背景:# 795548; 颜色:白色; border - radius: 2 px; text-align:中心; 字体大小:12 px; 行高:2; } <input type="file" class="btn-file-upload" value="Uploadfile" />
下面是一个用纯HTML和javascript“改变”文件类型输入文本的方法:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>