自定義CSS/HTML瀏覽圖像形式

Question

可能重複：
Style input type file?

我知道，每個瀏覽器都有自己的顯示方式...

<input type="file" name="image" id="image" class="input_text"/> 

我的問題是，有沒有辦法自定義圖片瀏覽按鈕。我想使用HTML/CSS/PHP將常規表單上的瀏覽和上傳按鈕替換爲一個圖像按鈕。這是否可行？是否與所有瀏覽器類型兼容？

謝謝你。

Answer 1

有多種方式，我喜歡的方式是這樣的：

<div class="browse"> 
    <div class="placeholder">Upload</div> 
    <input type="file" name="image" id="image" class="input_text"/> 
</div> 

有了這個CSS代碼：

.browse { 
    position: relative; 
    width: 100px; 
    height: 20px; 
} 

.browse input, browse div { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

.browse input { 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

這種方式上傳的文本將被顯示，但你實際上點擊瀏覽按鈕。

Answer 2

你可能最好使用一個插件像Uploadify。它可以讓你像任何其他元素一樣設置字段的樣式。