向 Rails 搜索字段标签添加高度答案

【问题标题】：adding height to rails search field tag向 Rails 搜索字段标签添加高度
【发布时间】：2014-03-04 22:55:36
【问题描述】：

我在设置 rails search_field_tag 的高度时遇到问题，我所做的似乎都没有改变输入框的实际高度，我知道这可以做到，但我遇到了麻烦，提前谢谢！

ERB：

<%= form_tag spree.products_path, method: :get, id: 'top-search-form',  do %>
  <%= search_field_tag :keywords, params[:keywords], id:'search_field', size: 15, maxlength: 128, placeholder: "Search" %>
  <%= submit_tag t(:search), class: 'search_b', name: nil, value: '' %>
<% end %>

css

.search_field {
    background: url(<%= asset_path 'store/bg_search.png' %>) no-repeat;
    float: left;
    padding: 4px;
    margin: 7px 0 0 15px;
}

input#search_field {
    border: 0 none;
    width: 147px;
    font-style: normal;
    background-color:transparent;
    margin-top:-4px;
    color: #454545;
    float: left;
}

input.search_b,
input.search_b:hover {
    vertical-align: top;
    display: block;
    float: left;
    border: 0;
}

【问题讨论】：

标签： html css ruby-on-rails ruby erb

【解决方案1】：

您可以改用 text_field 标签。看截图

<%=text_field_tag :age, value = nil, options = {style:"height:100px;border-radius:25px;", placeholder:"search"}%>

search_field_tag 与 text_field 标签的参数相同

正如http://apidock.com/rails/ActionView/Helpers/FormTagHelper/text_field_tag所说，选项可以接受其他参数“任何其他键都会为标签创建标准的HTML属性。”

更新戴乐是对的。您的 input#search_field 选择器中实际上没有高度。

【讨论】：

hm 我也试过这个，它实际上生成了两个输入字段，我似乎无法弄清楚为什么。

【解决方案2】：

在 CSS 中您使用 class .search_field{...} 但我在 ERB 中没有看到该类。也许您可以尝试更改高度或填充该字段。

【讨论】：

【解决方案3】：

<%= form_tag spree.products_path, method: :get, id: 'top-search-form', do %> 有尾随逗号，删除： <%= form_tag spree.products_path, method: :get, id: 'top-search-form' do %> 试试看，这个定制的 SCSS 对我有用：

form#top-search-form{ height:5em;
    input#search_field{height:4em;
    }

}

【讨论】：

嗯，好像不影响输入框的高度

【解决方案4】：

应该可以工作 'options = " 不需要。

"style:"font-size:1.0em" 代码变成了一个 HTML 选项。不需要在 style 之前的 'options = "。您可以使用任何允许的 HTML 字体大小选项，如 em、、small、large、%、px 等。

如果您在代码中留下 'options = '，Rails 将忽略。

【讨论】：