5

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

我已经看到了一些解决方案，例如设置输入类型 =“文件”按钮或https://github.com/filamentgroup/jQuery-Custom-File-Input的样式，但我想知道基础中是否有特定的东西，就像往常一样包装 div 样式根本不起作用（div.large-3.columns 等）。

你怎么做呢？

4

3 回答 3

1

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

<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 */
}

您也可以为某些浏览器使用伪类，请参阅文章

于 2013-05-17T10:48:32.050 回答
0

我刚刚将 .button 类应用于输入标签。它看起来对我来说已经足够好了。

于 2013-06-18T12:01:05.700 回答
0

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

它是完全语义化的、可访问的并且不需要 JavaScipt。基本上，您隐藏输入，确保在标签和文件字段上都设置了 id，然后相应地设置标签的样式。这是一篇很棒的文章，它解释了该技术以及 CodePen ( https://codepen.io/bmarshall511/pen/bjyEgq )，它显示了它是如何完成的：https ://benmarshall.me/styling-file-inputs/

[type="file"] + label {
  background: #f15d22;
  border-radius: 5px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
于 2018-08-16T22:53:23.817 回答