如何修改和设置简单表单 f.input 标签的样式

Question

我有一个表单，要求用户在一组特定的选项中进行选择。我的代码库中的表单如下所示：

= f.label :recognition, "How did you hear about us?", required: false, class: "font required-field"

= f.input :recognition, input_html: { class: "recognitionStyling" }, collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, required: false

现在确定这可行，但我想稍微调整一下样式，但在这样做时遇到了问题。

我现在拥有的是这样的：

然而我想要得到的是类似这样的东西：

我是否需要特定的输入来允许这种情况发生？我尝试的是在名为 recognitionStyling 的输入上添加一个 class，如下所示，但我不知道 CSS 是否是进行此修改的方法。

.recognitionStyling{
  width: 100%;
}

Answer 1

您可以将标签合并到输入中并在 input_html:

中添加占位符

= f.input :recognition, 
          input_html: { class: "recognitionStyling" }, 
          prompt: "-- SELECT ONE --", 
          collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, 
          label: "How did you hear about us?", 
          required: true

Answer 2

您可以为此下载 bootstrap。然后，您必须将 .js 和 .css 添加到您的资产中。对于添加的所有文件，将它们包含在 application.js 或 application.css 文件的顶部，如下所示（因此没有扩展名）。

在 assets/javascript/application.js 中：

//= require_bootstrap.min

在assets/stylesheets/application.css.scss

 *= require_bootstrap.min

在views/item/show.html.erb:

<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form role="form">
<div class="form-group">
  <label for="sel1">Select list (select one):</label>
  <%= f.select :recognition, input_html: { class: "form-control" }, collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, required: false %>
</div>

检查这个 link http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

如何修改和设置简单表单 f.input 标签的样式

How to modify and style a simple form f.input tag

html

css

ruby-on-rails

simple-form