Question

只想要的风格：

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

看起来像：

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

只使用css。

有可能吗？

Answer 1

如何使用label代替anchor，并通过label将input[type="file"]与for相关联：

＆＃13;

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

＆＃13;

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

＆＃13;

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

时遇到问题

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 4

你可以尝试使用这个“脏”黑客：

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

http://jsfiddle.net/1apggx8q/

Answer 5

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

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

如何使“<input type =”文件“/>”看起来像一个CSS的链接？

5 个答案: