我們可以更改<input type =「file」>樣式嗎？

我試圖改變HTML表單，輸入類型文件。這裏是我的代碼：我們可以更改<input type =「file」>樣式嗎？

HTML，形式ID =形式

<input class="upload_file" type="file" id="file" name="file" />

.CSS

I tried both: 
.upload_button{ 
    background: url('../images/upload_btn_bg.png') no-repeat; 
    width: 200px; 
    height: 40px; 
} 

#form input[type=file]{ 
    background: url('../images/upload_btn_bg.png') no-repeat; 
    width: 200px; 
    height: 40px; 
}

無兩的這些方法的工作原理。我確實從一些網站上看到，如臉譜，YouTube，谷歌或Twitter，他們有不同的風格。不知道他們是如何做到的。

來源

2010-05-13 learner.php

你不能這樣做與輸入型文件進行任何操作（除了巨大的黑客等）。我知道這聽起來很可怕，但網絡標準還沒有爲此提供解決方案。

但是我會建議的是，您使用了更靈活的東西，如swfUpload，它可以讓您更改豎框，並在上傳之前檢查文件大小。

它的一些巧妙的例子可以發現here

希望這有助於你

來源

2010-05-13 09:12:08

啊......我應該早點在這裏問這個問題，而不是花費數小時的時間來調試。嘆息 – 2010-05-13 09:15:24

沒關係。我們都做到了這一點:-) – 2010-05-13 09:25:44

swf帶來了如此多的安全風險，但沒問題。 – nagytech 2013-07-04 00:55:48

例如，嘗試這種變異http://www.quirksmode.org/dom/inputfile.html

來源

2010-05-13 09:10:06 Gopher

其實你可以！

您必須使用SI.Files庫來完成此操作。

Here大約是其詳細介紹瞭如何做一個很好的文章：

祝您好運！

來源

2011-07-29 11:42:36

您可以更改字體大小的高度或按照這個網址http://www.quirksmode.org/dom/inputfile.html（這基本上是我在我的項目中做的）。

來源

2012-02-02 17:09:00

謝謝！我嘗試了行高，但不起作用。看起來type =「file」上的字體大小樣式是獲取高大按鈕的唯一方法。你可以在這裏看到問題http://jsfiddle.net/gabrieleromanato/mxq9R/光標看起來不對，試圖解決下一步。 – 2013-04-24 21:50:35

爲什麼不直接把css放在顯示器上：none然後用另一個按鈕觸發這個按鈕？這可以用JavaScript來輕鬆完成，那麼你完全可以自己風格的按鈕

下面是如何觸發另一個按鈕的例子，但是這只是衆多方法之一： One button firing another buttons click event

來源

2013-03-22 13:37:15 user1282947

-3

Bhee，只需添加CSS定義到您的HTML input標籤：

，如：

<select style:"...whatYoureadBelow..."></select>

或

個

<input style:"...whatYoureadBelow..." />

CSS定義：

border:none; 
background-image:url('somePathToImage'); 
background-repeat:no-repeat; 
//those things below adjust according to your background image size 
width:XXpx; 
height:XXpx;

因此，你會得到你所擁有的在Facebook上或其他地方;）

來源

2013-05-20 13:22:15

你顯然沒有看到OP問的問題... – SteveB 2013-07-09 11:57:21

有史以來最好的黑客。輸入文件HTML：

<input type="file" class="hide" id='inputFile' /> 
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>

使用jQuery：

$('#triggerFile').on('click', function(e){ 
     e.preventDefault() 
     $("#inputFile").trigger('click') 
    });

來源

2013-09-16 17:21:29

我們可以更改<input type =「file」>樣式嗎？

回答

相關問題