編輯瀏覽按鈕

我有一個瀏覽按鈕，我想編輯。這是我如何做它：編輯瀏覽按鈕

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

的按鈕看起來像你經常瀏覽按鈕，但我希望它看起來像這樣： enter image description here

我一直在四處詢問和做研究，並從我可以告訴唯一的（不是令人難以置信的長和耗時）的方式來編輯這將是找到一些實用工具，將爲我做，並與此混亂。我在哪裏可以找到該實用程序/是否有另一種（不是非常耗時）的方式來編輯它？

來源

2011-03-21 Stanley Cup Phil

查看一些關於它的現有問題：http://stackoverflow.com/questions/3906039/applying-css-on-asp-net-fileupload-controls-browse-button-only/3906063#3906063 – wsanville 2011-03-21 18:35:37

我已經開始使用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主題。

來源

2011-03-21 18:53:10 bpeterson76

JQuery UI does not似乎適用於文件上傳控件，特別是「瀏覽...」按鈕 – Fergie 2011-05-15 20:31:09

@Fergie，或許你錯過了一些東西，我在所有文件上傳按鈕上運行它，也許是幾十個工作示例。 – bpeterson76 2011-05-16 03:59:01

這只是一個小動作，也許你可以使用。我正在使用跨度來覆蓋文件按鈕。

<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"/>

這只是一招，我不認爲它適用於每個人，對不起，如果不能幫助你們。一個簡單的案例的簡單解決方案。

來源

2012-10-01 09:03:39 735

編輯瀏覽按鈕

回答

相關問題