我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。

我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?


当前回答

这是不可能的。否则,你可能需要使用Silverlight或Flash上传控件。

其他回答

这可能会在将来帮助别人,你可以为输入设置你喜欢的标签,把你想要的任何东西放在里面,隐藏输入,显示为none。

它在iOS的cordova上完美地工作

<link href=“https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css” rel=“stylesheet”/> <label for=“imageUpload” class=“btn btn-primary btn-block btn-outlined”>Seleccionar imagenes</label> <输入类型=“文件” id=“图像上传” 接受=“图像/*” 样式=“显示:无”>

这应该可以工作:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

您可以使用一个简单的按钮和隐藏输入文件

使用jquery和bootstrap:

HTML代码

<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">

CSS:

.hidden{display:none}

JS :

$("#btn-file").click(function () {
    $("#input-file").trigger('click');
});

$("#input-file").change(function () {
    var file = $(this)[0].files[0].name;
    $("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});

每个浏览器都有自己的控件呈现方式,因此您不能更改控件的文本或方向。

如果你想要一个html/css的解决方案,而不是Flash或silverlight的解决方案,你可能想尝试一些“类型”的技巧。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就我个人而言,因为大多数用户坚持使用他们所选择的浏览器,因此可能习惯于在默认呈现中看到控件,如果他们看到不同的内容(取决于您所处理的用户类型),他们可能会感到困惑。

<!DOCTYPE html > < html > < >头 < meta charset = " utf - 8 " > <meta name="viewport" content="width=device-width"> <标题> JS本< /名称> < / >头 身体< > <按钮样式= "显示:块;宽度:120 px;高度:30 px; " onclick = " . getelementbyid (getFile) .click ()你的文本在这里</按钮> <input type='file' id="getFile" style="display:none"> 身体< / > < / html >