更新日 [掲載日] この記事は約 2 分で読めます

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

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>

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

ゼロからネットで稼ぐための
無料メルマガスクールで勉強しませんか?

これを読んでいるあなたは、

  • 「フリーランスになりたいけど稼げるか不安だ」
  • 「クラウドソーシングや営業して稼げるか不安だ」
  • 「副業をはじめたが、いっこうに成果がでない」
  • 「フリーランスになるのにプログラミングを勉強したい」
  • 「SEO・上位表示対策を勉強したい」
  • 「在宅で稼げるようになりたい」
  • 「WordPressを学習したいがよくわからない」

そんなお悩みはないだろうか?

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

いまなら、5大特典プレゼント付きです。

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を反映させる事ができます。

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

あなたは以下のことで悩んでないだろうか?
「Ruby on Railsの勉強で使いこなせなくて困っている」
「近い将来に向けてスキルアップし収入を増やしたい人」
「エンジニアとして働きたい、転職したい」

そんなお悩みなら
あなたのお役に立てます。