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

Answer 2

You can download bootstrap for that. Then you will have to add the .js and the .css to your assets. For all files added, include them in the top part of your application.js or application.css file as showed here below (so without their extension).

In assets/javascript/application.js :

//= require_bootstrap.min

In assets/stylesheets/application.css.scss

 *= require_bootstrap.min    

In the 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>

check this link http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp