Question

我正在使用基础，我没有在文档中看到有关文件输入的任何内容，只有一般输入元素。但是设置文件输入的样式并不容易。如果你想让它与所有浏览器中整个表单的设计保持一致，那就更多了。

我见过一些像Styling an input type="file" button或https://github.com/filamentgroup/jQuery-Custom-File-Input这样的解决方案，但是我想知道基础上是否有特定的东西，因为通常的包装div样式根本不起作用（div.large） -3.columns等。）。

你是怎么做到的？

Answer 1

你只需要按钮吗？还是带文件地址的字段？如果只按下最简单的解决方案是demo

<a class="wrapper">
    button name
  <input type="file"/>
</a>

.wrapper {
    width: 100px;
    height: 30px;
    overflow: hidden;
    position: relative;
}
input {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     font-size: 50px; /* some huge for cursor pointer hack */
}

您也可以为某些浏览器使用伪类see article

Answer 2

我刚刚将.button类应用于输入标记。对我来说看起来不错。

Answer 3

对于比Foundation的默认样式更为复杂的任何样式（例如，更改浏览按钮的外观），您都需要编辑其标签元素技术的实现。

它是完全语义的，可访问的并且不需要JavaScipt。基本上，您隐藏输入，确保在标签和文件字段上都设置了ID，然后相应地设置标签样式。这是一篇很棒的文章，介绍了该技术以及CodePen（https://codepen.io/bmarshall511/pen/bjyEgq），并展示了它的完成方式：{{3}}

[type="file"] + label {
  background: #f15d22;
  border-radius: 5px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

基础样式文件输入

3 个答案: