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

Question

I have a form in which I'm asking a user chose between a specific collection of options. My form in my codebase looks like this:

= 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

Now sure this works, but I'm wanting to style this a little bit and having problems doing so.

What I have right now looks like this:

Yet what I am trying to get is something similar to this:

Is there a specific input that I would need to allow for this to happen? What I tried was to add a class on my input called recognitionStyling, which looks like the following, but I don't know if CSS is the way to make this modification.

.recognitionStyling{
  width: 100%;
}

Answer 1

You can consolidate the label into the input and add a placeholder within the 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