シンプルなフォーム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 

Answer 2

。その後、.jsと.cssを資産に追加する必要があります。追加されたすべてのファイルについて、以下のようにapplication.jsファイルまたはapplication.cssファイルの最上部に追加します（拡張子は含めません）。資産

/ジャバスクリプト/ application.js：資産/スタイルシート/ application.css.scssビュー/項目/ show.html.erbで

*= require_bootstrap.min  

で

//= require_bootstrap.min 

：

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

このリンクをチェックしてくださいhttp://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp