將超鏈接放在輸入文件上

Question

如何將超鏈接放在使用CSS的文本框上？

<a href="#" id="up">click</a> 
<input type="file"></input> 

我要隱藏的文件輸入，使超鏈接在文件輸入可見，所以它顯示的是他點擊超鏈接來瀏覽自己的文件，而不是文件輸入用戶。

Answer 1

只需將輸入的不透明度爲0，所以它是無形的，那麼如果你喜歡只定位在頂部<p>標籤（或<a>。

<div id="container"> 
<p>Browse</p> 
<input type="file"/> 
</div> 

而這個CSS

#container input { 
    opacity: 0; 
    height:30px; 
    width:100px; 
} 
#container{ 
    height:30px; 
    width:100px; 
    background-color:#ccc; 
} 
#container p { 
    position:absolute; 
    text-align:center; 
    height:30px; 
    width:100px; 
} 

這樣，你可以風格你的<p>是一個真棒按鈕:)

Answer 2

請參閱這篇文章：www.quirksmode.org/dom/inputfile.html

它涵蓋了所有不同的方法，但是你將不得不使用圖像而不是鏈接。