基础样式文件输入

Question

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

我已经看到了一些解决方案,如Styling一个输入类型="文件"按钮或https://github.com/filamentgroup/jQuery-Custom-File-Input,但我想知道是否有一些特定的基础,像往常一样包装div样式根本不起作用(div.large-3.columns等).

你怎么做呢？

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

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