问题在rails中自定义f.file.field的外观

    <div id="photo_attachment_container">
        <%= f.file_field :photo %>
    </div>

目前这只是一个按钮，如何添加一些CSS并自定义此按钮的外观（例如尺寸背景等）？谢谢

12830

2017-08-12 08:00

起源

答案:

HTML文件字段已经并且仍然是最不可自定义的HTML表单控件之一。另一个问题是它在浏览器和操作系统之间的呈现方式如此不同。设置这些控件样式的最佳方法是将文件控件呈现为另一个按钮或一组元素的透明元素，这些元素按照您希望的方式设置样式。通过用户单击激活文件控件不需要是可见的，但它确实需要位于最顶层（发送单击或焦点事件在我的测试中不起作用）。

这是一些HTML示例：

<div id="test">
    <div class="wrapper">
        <input type="file" />
    </div>
    <button>Select a file</button>
</div>

CSS将包装器div和按钮呈现为绝对定位的元素。按钮是可见的并且样式化，而包含文件字段的包装器是透明的。当你将鼠标悬停在它上面以说明它相对于下面的样式按钮的位置时，我设置了包装器字段来降低透明度。

#test {
    position: relative;
}

#test .wrapper {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 2;
}

#test .wrapper:hover {
    opacity: 0.5;
}

#test button {
    background-color: #ccc;
    border: none;
    color: #666;
    padding: 3px 5px;
    border-radius: 5px;
    position: relative;
    top: 0;
    z-index: 1;
}

关于JS小提琴的例子。

http://jsfiddle.net/JgDuh/

编辑：

要回答您在评论中提出的问题，您可以在Rails视图模板中构建上述答案，如下所示：

<div id="photo_attachment_container">
  <div class="wrapper">
    <%= f.file_field :photo %>
  </div>
</div>

这将呈现为（请注意，我使用过 user 作为你传入的任何模型的替代品 form_for）：

<div id="photo_attachment_container">
  <div class="wrapper">
    <input type="file" id="user_photo" name="user[photo]" />
  </div>
</div>

2017-08-12 08:36

如果我像你说的那样做，但我在轨道上工作 <%= f.file_field :photo %> ？我可以用ruby做类似的事吗？或者我怎样才能将文件输入识别为：照片？ - user852974

答案: