How to make "<input type =" file "/"> "look like a CSS link?

Question

Just want a style:

<input type="file" value="Choose the file" /> 

as follows:

 <a href="#">Choose the file</a> 

just using css.

Is it possible?

Answer 1

Most likely, you need a little tweak for size, hover state, etc., but why not:

 span { cursor: pointer; } a { position: relative; overflow: hidden; } span:hover a { color: red; } a+input { position: absolute; top: 0; left: 0; opacity: 0; } 

 <span><a href='#'>Link!</a><input type='file' /><span> 

The basic premise is that input type=file must be absolutely positioned above the "replacement" with its opacity equal to zero, so it is still a trap for normal user behavior.

Answer 2

How to use label instead of anchor , and you connect the label to input[type="file"] via for :

 label{ color: blue; cursor: pointer; } label:hover{ text-decoration: underline; } #file_input_id{ display:none; } 

 <label for="file_input_id">I'm a wannabe link</label> <input type="file" id="file_input_id"> 

Note. safari has problems using display:none to input[type="file"]

Answer 3

You can add a label associated with the input (and you should have accessibility anyway, especially since you really need to hide the input). Then you can set the opacity for the input to 0 and make it position:absolute so that it does not affect the page. You can hide it, but I think that some browsers will not invoke tag functionality, so you cannot select a file.

You can then create the shortcut however you want, or even wrap it in the a tag so that it behaves exactly like the other links on your page.

The disadvantage of hiding input is that you cannot see the selected file. If you need to do this, you can show it on the shortcut using a simple jquery bit:

 $('input[type="file"]').change(function() { // find the label for the currrent file input $('label[for="' + this.id + '"]').text('Choose the file - ' + $(this).val()); }); 

 input[type=file] { position: absolute; top: 0; right: 0; filter: alpha(opacity=0); opacity: 0; margin: 0; padding: 0; } a > label { /* inherit the hand cursor from the a tag */ cursor:inherit; } a:hover { color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="#"> <input id="thefile" type="file" value="Choose the file" /> <a href="#"><label for="thefile">Choose the file</label></a> </form> 

Answer 4

You can try using this dirty hack:

 input { opacity: 0; position: relative; left: -100px } 

http://jsfiddle.net/1apggx8q/

Answer 5

Here is another solution similar to the one described above, but I separate the input tag and show the link.

 div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } input.file { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } 

And html

 <div class="fileinputs"> <input type="file" class="file" /> <div class="fakefile"> <a href="">browse file</a> </div> </div> 

Here is the fiddle