如何使“<input type="file" />”看起来像一个带有 CSS 的链接？答案

【问题标题】：How to make a "<input type="file" />" looks like a link with CSS?如何使“<input type="file" />”看起来像一个带有 CSS 的链接？
【发布时间】：2015-02-09 17:13:42
【问题描述】：

只是想要的风格：

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

看起来像：

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

只使用 css。

有可能吗？

【问题讨论】：

根据经验，这是一个很难设置样式的元素，尤其是在旧版本的浏览器中。
您想将file-按钮设置为链接？
喜欢这个？ stackoverflow.com/a/18716005/1364685

标签： html css

【解决方案1】：

可能需要对大小、悬停状态等进行微调，但为什么不这样做：

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

&lt;span&gt;&lt;a href='#'&gt;Link!&lt;/a&gt;&lt;input type='file' /&gt;&lt;/span&gt;

基本前提是input type=file 应该绝对定位在链接上，其不透明度设置为零，因此它仍然会捕获正常的用户交互行为。

【讨论】：

不错的解决方案，但是将input 放在a 标记内是无效的。
@putvande - 绝对，它仅用于演示目的，但为了准确性而进行了编辑:) +1
最后一个 span 不应该是结束标签吗？

【解决方案2】：

如何使用label 而不是anchor，然后通过for 将label 与input[type="file"] 连接起来：

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

注意：safari 在使用 display:none 到 input[type="file"] 时存在问题

【讨论】：

这个线程中有非常聪明的技巧和解决方法，但这是迄今为止 IMO 最优雅的答案。
我一直在设计input[type="file"] 时遇到问题，恕我直言，这个解决方案最适合它。
是的，这是正确的答案。坚持使用表单元素；干净简单。无需破解。
如果你只想要一个链接的外观，没有任何多余的用户界面，这绝对是要走的路

【解决方案3】：

您可以添加链接到输入的标签（无论如何您都应该为可访问性，特别是当您确实需要隐藏输入时）。然后可以将输入的opacity设置为0，设为position:absolute，这样不影响页面。您可以隐藏它，但我认为某些浏览器不会触发标签功能，因此您将无法选择文件。

然后，您可以根据需要设置标签的样式，甚至可以将其包装在 a 标记中，使其行为与您页面上的其他链接完全相同。

隐藏输入的缺点是您将无法看到所选文件。如果您需要这样做，您可以使用简单的 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>

【讨论】：

【解决方案4】：

这是另一个与上述类似的解决方案，但我将输入标签分开并显示链接。

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

还有html

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

这里是fiddle

【讨论】：

【解决方案5】：

您可以尝试使用这种“肮脏”的技巧：

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

http://jsfiddle.net/1apggx8q/

【讨论】：

将input 放入a 标记是无效的。
请在您的代码中添加一些解释，说明它是如何解决问题的，这将有助于以后的其他人