How to make a "<input type="file" />" 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?

Answer 1

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"]

Answer 2

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.