RailsでSelectにCSSを反映させる方法

記事内にプロモーションリンクが含まれる場合があります。

たとえば、Selectがある編集や新規投稿画面でCSSが反映されなくて困ってないだろうか?

Railsで通常CSSを反映させるには通常のHTMLと違った方法で反映させないと行けません。

今回は初心者でも確実に解決できるように分かりやすくRailsのSelectのCSS反映方法を解説します。

    <div class="field">
      <%= form.label :category_id %>
      <%= form.select :category_id, Category.all.map { |o| [o.name, o.id] } %>
    </div>

この様な形であれば、解決することが可能だ。

無料パソコンスクール講座
WordPress・SEO・プログラミング

あなたは以下のことで 悩んでないだろうか?

「フリーランスになりたいけど稼げるか不安だ」
「クラウドソーシングや営業して稼げるか不安だ」
「転職で必要になり困っている」
「スマホはあるけどパソコンが古くて不安だ」
「広告やLINEからの集客を得たい」
「仕事でグラフや資料制作を思うように作れない」
「プログラミングを学習して副業したいけど不安だ」
「副業をはじめたが、いっこうに成果がでない」
「退職してノートパソコンだけで収入を得たい」
「何がわからないかわからない状態が続き何度も挫折した」
「在宅で稼げるようになりたい」
「副業で収入を得たい」

そんなお悩みのあなたにこそ
取得して頂きたい内容です!

このメディアを運営している制作・プログラミング相談のプロが
全て無料で相談と学習できるように
無料スクールのメルマガ講座を開設しました。

いまなら、先着300部限定で無料プレゼント付です。

今すぐ無料ダウンロードする

Railsで間違ったSelectにCSSをあてた形

RailsでSelectにCSSが反映されない
RailsでSelectにCSSが反映されない
    <div class="field">
      <%= form.label :category_id %>
      <%= form.select :category_id, Category.all.map { |o| [o.name, o.id] }, {}, {class: 'form-control'},class: 'form-control' %>
    </div>

そう、いつも通りこのように書いてしまうとCSSは反映されない。

どう書けばRailsのSelectにCSSが反映されるかと言うと

RailsのSelectにCSSをあてた正しい形

RailsでSelectにCSSが反映された
RailsでSelectにCSSが反映された
    <div class="field">
      <%= form.label :category_id %>
      <%= form.select :category_id, Category.all.map { |o| [o.name, o.id] }, {}, {class: 'form-control'} %>
    </div>

この様に

{class: 'form-control'}

括弧で囲み、その前に空の括弧{}を入れます。

こうすることでRailsのSelectにCSSを反映させる事ができます。

この記事を書いた人

よこやま良平

よこやま良平

こんにちは!18年以上ITエンジニアとして活動してきた
よこやま良平です。

4歳~85歳まで、年間1,792人名以上の方に
パソコンやプログラミング講座を行ってきました。

また18冊以上の書籍を出版しており、連続で1位を獲得しました。
オンライン講座では200件以上のレビューを頂いており
評価は4.9/5.0と高評価を得ています。

その他これまでに3000以上のサービス・システム・サイトを作成。