html - 编辑浏览按钮

Question

我有一个要编辑的浏览按钮。以下是我的制作方法:

<input type = "file" id = "myBrowseButton" class = "BrowseButtons" name = "Browse"  />

该按钮看起来像您的常规浏览按钮，但我希​​望它看起来像这样:

我一直在四处打听并进行研究，据我所知，编辑此内容的唯一(不是难以置信的漫长和耗时)方法是找到一些可以为我做这件事的实用程序并解决这个问题。我在哪里可以找到所述实用程序/是否有另一种(不是非常耗时的)方法来编辑它？

Answer 1

这只是一个小技巧，也许你可以使用。我正在使用跨度来覆盖文件按钮。

<script type="text/javascript">
    $(function() {
        $("#button1").button();
        $("#button1").click(function() {
            $("#fileUpload1").click();
        });
    });
</script>
<span id="span1" style="overflow: hidden;width: 300px;white-space: nowrap; display: inline-block;">
    <input type="file" id="fileUpload1" name="fileUpload1" size="100" style="width: 400px;"/>
</span>
<input type="button" id="button1" value="Browse Custom 1"/>

这适用于我，使用 Firefox 和 IE，但不适用于 Chrome，因为 UI 不同。

其次，当使用带有文件上传的jQuery对话框时，文件上传的宽度根据span宽度变回。所以技巧是在打开对话框后再次设置宽度:

$("#button3").click(function() {
    $('#dialog1').dialog('open');
    $("#fileUpload2").width(1000);
    $("#span2").width(200);
    //$("#fileUpload2").css('margin-left', '300');
});


<div id="dialog1" style="display: none;">
<span id="span2" style="overflow: hidden;width: 300px;white-space: nowrap; display: inline-block;">
    <input type="file" id="fileUpload2" name="fileUpload2" size="100" style="width: 400px; margin-left: 300px;"/>
</span>
<input type="button" id="button2" value="Browse Custom 2"/>

这只是一个技巧，我认为它并不适用于所有人，如果不能帮助到大家，请见谅。简单案例的简单解决方案。