CODEWITHSUNDEEP
css
Sora
Sora

Reputation: 2551

Put a hyperlink over an input file

How can I put a hyperlink over a textbox using CSS?

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

I want to hide the file input and make the hyperlink visible over the file input so it shows for the user that he's clicking the hyperlink to browse his files and not the file input.

Upvotes: 0

Views: 94

Answers (2)

Jacob Lauritzen
Jacob Lauritzen

Reputation: 2840

You can just set the input's opacity to 0, so it's invisible, then just position a <p> tag on top (or <a> if you prefer.

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

And this 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;
}

That way you can just style your <p> to be some awesome button :)

Upvotes: 1

Ian
Ian

Reputation: 6134

See this article: www.quirksmode.org/dom/inputfile.html

It covers all the different methods, however you're going to have to use an image, not a link.

Upvotes: 0

Related Questions