如何修改简单的表单 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类，如下所示，但我不知道 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