编辑浏览按钮

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＆amp; IE但不在Chrome中，因为用户界面不同。

其次，当使用带有文件上传的jQuery对话框时，文件上传的宽度会根据跨度宽度进行更改。所以诀窍是在打开对话框后再次设置宽度：

$("#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"/>

这只是一个伎俩，我不认为它适用于所有人，对不起，如果无法帮助大家。一个简单案例的简单解决方案。

Answer 2

我已经开始使用Jquery的UI Button功能完成所有表单按钮（以及许多链接）。通过相对较小的文件分组，它可以自动舍入，样式和改进功能，而附带的Theme Roller系统允许您通过简单，可配置的下载更改样式...甚至允许即时切换。

获得此外观就像添加：class="fg-button ui-state-default ui-corner-all"一样简单。这些样式也适用于其他元素，因此您可以对div，图像等进行舍入。

这是一本入门书：http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

熟悉ThemeRoller之后，甚至可以使用它来设置页面/应用程序的其他元素的样式。我有一个完全按照这种方式完成的应用程序，所以要为不同的客户端重新设置应用程序，我只需生成一个新的ThemeRoller主题。