编辑浏览按钮

Question

我有一个浏览按钮，我想编辑。这是我如何做它：

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

的按钮看起来像你经常浏览按钮，但我希​​望它看起来像这样：

我一直在四处询问和做研究，并从我可以告诉唯一的（不是令人难以置信的长和耗时）的方式来编辑这将是找到一些实用工具，将为我做，并与此混乱。我在哪里可以找到该实用程序/是否有另一种（不是非常耗时）的方式来编辑它？

Answer 1

我已经开始使用Jquery的UI Button功能来完成我所有的表单按钮（以及很多链接）。使用相对较小的文件分组，它会自动轮转，样式并改进功能，而包含的主题滚轮系统允许您通过简单的可配置下载来更改样式......或者甚至允许即时切换。

得到这个样子是因为添加简单：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主题。

Answer 2

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

<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中，因为用户界面是不同的。

其次，当使用带有文件上传的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"/> 

这只是一招，我不认为它适用于每个人，对不起，如果不能帮助你们。一个简单的案例的简单解决方案。