How to make a "" looks like a link with CSS?

Question

Just want to the style of:

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

looks like:

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

just using css.

Is it possible?

From experience, this is a very hard element to style, particularly in older versions of the browser. — Paddy, Dec 11 '14 at 09:18

score 22 · Answer 1 · edited May 23 '17 at 12:24

22

How about using label instead of anchor and you connect the label with 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 issues with using display:none to input[type="file"]

edited May 23 '17 at 12:24

Community

1
1

answered Dec 11 '14 at 09:30

Vucko

20,555
10
56
107

3

There are very clever hacks and workarounds in this thread, but this is by far the most elegant answer IMO. – John Weisz Dec 11 '14 at 09:35
2

I've always had problems with styling `input[type="file"]` and this solution is the best for it, IMHO. – Vucko Dec 11 '14 at 09:37
Yeah, this is the correct answer. Sticking with form elements; clean and simple. No hacks needed. – misterManSam Dec 11 '14 at 09:46
This is definitely the way to go if you only want the appearance of a link, without any extraneous UI – SW4 Dec 11 '14 at 09:52

score 10 · Accepted Answer · edited Dec 28 '18 at 07:01

10

It will likely require some fine tuning for the size, hover state etc, but why not do:

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 the input type=file should be absolutely positioned over the link with its opacity set to zero so it still traps the normal user interaction behaviour.

edited Dec 28 '18 at 07:01

David Mihal

944
6
23

answered Dec 11 '14 at 09:22

SW4

69,876
20
132
137

2

Nice solution, however putting an `input` inside an `a` tag is invalid. – putvande Dec 11 '14 at 09:24
@putvande - absolutely, it was for demo purposes only, but have edited in the interests of accuracy :) +1 – SW4 Dec 11 '14 at 09:27
the last span shouldn't be a closing tag? – Mario Flores Dec 17 '17 at 22:42

score 1 · Answer 3 · answered Dec 11 '14 at 09:37

You can add a label linked to the input (and you should for accessibility anyway, especially as you really need to hide the input). Then you can set the opacity of the input to 0 and make it position:absolute so that it does not affect the page. You could hide it, but I think some browsers will not trigger the label functionality, so you won't be able to choose a file.

You can then style the label how you want, or even wrap it in an a tag so it will behave exactly like the other links on your page.

The disadvantage of hiding the input is that you will not be able to see the chosen file. If you need to do that you can show it in the label with a simple bit of jquery:

$('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>

score 0 · Answer 4 · answered Dec 11 '14 at 09:28

0

You can try using this "dirty" hack:

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

http://jsfiddle.net/1apggx8q/

answered Dec 11 '14 at 09:28

Helen Fox

1

Putting an `input` inside an `a` tag is invalid. – putvande Dec 11 '14 at 09:34
please add some explanation to your code, showing how it solves the problem, this will help others in the future – Our Man in Bananas Dec 11 '14 at 09:35

score 0 · Answer 5 · answered Dec 11 '14 at 09:34

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

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 the html

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

Here is the fiddle

How to make a "" looks like a link with CSS?

5 Answers5