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

さまざまな方法をすべて網羅していますが、リンクではなく画像を使用する必要があります。