【Rails】CSSでプルダウンメニューの最初の項目だけ色を変える方法

これだけで、、、いけます。

※CSSでプルダウンメニューのoptionにデザインを当てられず、、、相当迷いました。

まずはプルダウンメニューにrequired属性をつけます。

下のサンプルコードはsimple_formを使っているので、ちょっと書き方が違う人もいるかもしれませんが、、、

コード

 <%= f.input :keyword, label: false, placeholder: "キーワード", required: true %>

例えば上のサンプルコードの場合、キーワードがフォームに入力されていないと、エラーが出るようになります。

続いてcssでselect:invalidに指定したい色を設定します。

例えば以下のような感じです。

コード

  select:invalid {
    color: red;
  }

これはプルダウンメニューで選択した項目のvalueが空の時の色を指定しています。

プルダウンメニューのPlaceholderなどで設定している項目にはvalueがないので(developerツールなどで確認してみてください)、このような方法が使えるんですね。

以下の記事を参考にしました。なるほどと思いました。

Selectタグの最初の項目だけ色を変える方法【2つの方法を紹介】