css - 在输入文件上放置超链接

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

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