你如何使用zurb基础设置表单文件字段的样式？

Question

我正在尝试使用Rails创建一个按钮,使用Rails上传图片.我试过这个:

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

不幸的是,它没有工作,并创建了两个不同的按钮,让您选择一张图片.我需要专门为文件字段做些什么吗？

Answer 1

我发现这个资源对于设置输入 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;
}