CSS - 文件上傳/選擇按鈕 - 在IE，Firefox，歌劇

不同我有形式是這樣的：CSS - 文件上傳/選擇按鈕 - 在IE，Firefox，歌劇

<form method="POST"> 

<p> 
    Nazwa kategorii: <br /> 
    <input name="NazwaKat" type="text" width="80" /> 
</p> 

<p>Opis kategorii: <br /> 
    <textarea name="OpisKat" columns="80" rows="3"></textarea> 
</p> 

<p>Obrazek: <br /> 
    <input class="img" type="file" pattern="*.jpg" name="image" /> 
</p> 

<p> 
    <input type="submit" value="Zapisz"/> 
</p> 

</form>

使用CSS這樣的：

input, textarea 
{ 
    border: 1px solid #bbb; 
    width: 100%; 
}

在每一個瀏覽器我的文件上傳輸入看起來不同。我試過IE，FF和Opera。這是爲什麼發生？

Firefox顯示帶有3d邊框的文件名和按鈕的框， IE顯示帶有3d邊框的「瀏覽...」按鈕，但帶有文件名的字段正常。在歌劇下，一切都好 - 沒有3d邊框。

進出口使用reset.css這樣的：

/* Browser style reset */ 

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
    { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } 
    body { line-height: 1.5; background: #fff; margin: 1.5em 0; } 
    table { border-collapse: collapse; border-spacing: 0; } 
    caption, th, td { text-align: left; font-weight:400; } 
    blockquote:before, blockquote:after, q:before, q:after { content: ""; } 
    blockquote, q { quotes: "" ""; } 
    a img { border: none; } 
    input,textarea { margin: 0; } 

    /* Removes Firefox imposed outline */ 
    a { outline: none; } 

    /* Clearing floats without extra markup */ 
    .wrapper { display: inline-block; } 
    .wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
    * html .wrapper { height: 1%; } 
    .wrapper { display: block; }

有什麼辦法來解決這個？

順便說一句 - 有什麼辦法可以將文件名文本與右側對齊嗎？當路徑很長時，沒有文件名可見，只有開始的補丁是「C：\ Users \ Myusername \ Documents」等。我想查看文件名，而不是路徑！

來源

2012-02-24 Kamil

這已在這裏被廣泛覆蓋，簡單的答案是，你只能用javascript繞過這個。 – jackJoe 2012-02-24 19:47:42

謝謝。這應該是在回答，而不是評論。 – Kamil 2012-02-24 19:58:52

但我看到新問題。如何繞過它與JavaScript？ :) – Kamil 2012-02-24 20:22:37

在每個瀏覽器中我的文件上傳輸入看起來不一樣。我試過IE，FF 和Opera。這是爲什麼發生？

因爲文件上傳是由客戶端機器的操作系統呈現的，而不是HTML。

來源

2012-02-24 19:58:57

我認爲這是錯誤的答案。我只使用一個操作系統，所以瀏覽器引擎顯示這個不同。應該有一個由W3C開發的該死的渲染引擎，而不是由20個組織開發的引擎。 – Kamil 2012-02-24 20:07:07

XP文件元素與Windows 2000文件元素不同，它不同於MAC文件元素，這就是爲什麼你可以通過CSS設置樣式的原因。我同意你的看法，但這是現實。多年來這一直是一個持續的限制。 – 2012-02-24 20:13:49

請參閱：http://stackoverflow.com/questions/2825509/can-we-change-input-type-file-style – 2012-02-24 20:23:03

CSS - 文件上傳/選擇按鈕 - 在IE，Firefox，歌劇

回答

相關問題