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

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

結論

  1. まずはselectにrequired属性を付与する
  2. 続いてcssでselect:invalidに色を設定する

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

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

内容

まずはselectにrequired属性を付与する

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

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

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

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

続いてcssでselect:invalidに色を設定する

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

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

コード
  select:invalid {
    color: red;
  }

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

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

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

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

Leave a Reply

Your email address will not be published.

CAPTCHA