html - 您如何使用 zurb foundation 设计表单文件字段的样式？

Question

我正在尝试使用 Rails 为 Zurb Foundation 创建一个按钮来上传图片。我试过这个:

<input class="tiny round disabled button" name="picture[picture]" type="file">

不幸的是，它不起作用并创建了两个不同的按钮来让您选择图片。有什么我需要专门为文件字段做的吗？

Answer 1

我发现这个资源对设置 input type="file"的样式很有帮助:

http://www.quirksmode.org/dom/inputfile.html

这是出了名的困难，但这本质上涉及将实际输入与应用了您的样式的假输入分层。

<div class="file-inputs">
    <input type="file" class="hidden-input">
    <div class="fake-input">
        <input>
        <img src="images/YOURBUTTON.png">
    </div>
</div>

使用以下 CSS:

div.file-inputs {
position: relative;
}

div.hidden-input {
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;
}