スタイリングをレールf.inputスタイリングに追加するには？

Question

私は複数のオプションを顧客に求めるレールフォームを作成しています。その中から選択するオプションは複数あります。私はコレクションを通して生成されたオプションのリストを持つことができましたが、私の問題はリストがそれが置かれているコンテナの幅全体を引き伸ばすことです。私が何を試みても、私はできませんそれに応答するために何かを得る。何が起こっているのかは、入力に付随するデフォルトのスタイルを引き続き取得することです。私は誰もがこのような状況で見て、私を助けることができるかどうか疑問に思っていた。

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

.recognitionStyling{ 
    width: 100%; 
} 

Answer 1

あなたはSimple Formを使用しているので、あなたが入力に設定されたクラスたい場合は、input_htmlオプションにあなたのCSSクラス名を渡す必要があります。

= f.input :recognition, input_html: { class: 'recognitionStyling' } 

をラベルにCSSクラスを設定したい場合：

= f.input :recognition, label_html: { class: 'recognitionStyling' } 

入力とラベルの両方を折り返したい場合（cssクラスをデフォルトのSimple Formラッパーに設定）：

= f.input :recognition, wrapper_html: { class: 'recognitionStyling' }