帶框陰影的樣式輸入類型=「文件」

我正在使用javascript來添加使用CSS盒陰影的紅色發光，以形成未正確填充的字段。我遇到了我的文件輸入字段的問題，在Firefox中，輝光圍繞瀏覽按鈕展開，我也無法刪除默認邊框。帶框陰影的樣式輸入類型=「文件」

有沒有辦法實現這與CSS？

謝謝。

下面是一個例子 -

enter image description here

HTML

<input type='file' id='userfile' name='userfile' maxlength='80' class='form-input'/>

CSS類被分配

.field-error { -webkit-box-shadow: 1px 1px 5px 5px #ff0000; -moz-box-shadow: 1px 1px 5px 5px #ff0000; box-shadow: 1px 1px 5px 5px #ff0000; border: none; }

來源

2012-01-07 Tom

雖然這不是達到標準的方式這個，但是你是一種在文件元素周圍創建一個div的方法，給div一個方塊陰影並使用寬度爲了解決這個問題，但這又只適用於firefox，因爲chrome具有不同的呈現文件上傳元素的方式。

例如類似this

來源

2012-01-07 19:31:05 defau1t

謝謝，我採納了這個想法，並創建了一個有一些填充的div，並在整個領域中走來走去。到目前爲止，它似乎在Firefox和Chrome中完成了這項工作。 – Tom 2012-01-07 19:56:07

有時AG o我遇到類似文件輸入的類似問題。這是我能找到的最好的：http://www.quirksmode.org/dom/inputfile.html

希望這可以幫助你。

更新：還有一個jQuery插件樣式輸入字段：http://www.appelsiini.net/projects/filestyle

來源

2012-01-07 19:25:54 Diego

據我所知道的「瀏覽」按鈕是完全不能訪問CSS操作。你需要一些技巧來克服這個問題。我建議你看看這篇文章：

http://www.quirksmode.org/dom/inputfile.html

或者使用jQuery的選擇：

http://www.appelsiini.net/projects/filestyle

來源

2012-01-07 19:26:57 Qorbani

謝謝，這些是有用的鏈接。不是我想要做的事，但他們將在未來有用。 – Tom 2012-01-07 19:56:44

帶框陰影的樣式輸入類型=「文件」

回答

相關問題