在输入文件上放置一个超链接

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

它涵盖了所有不同的方法，但是您将不得不使用图像，而不是链接。