プルダウンのフォームでプレースホルダーのようなものを実装する方法（Rails）

はじめに

Railsでアプリを作成中、以下のようなフォームを実装したいときに、どのように実装するかが勉強になったので記載します。

• 未選択時
  
• プルダウンを表示
  
• 選択後
  

前提として、selectタグでは、placeholder属性が効かないので、実装にあたって少し工夫が必要でした。

仕様

このプルダウンのフォームは、以下のような仕様になっています。

1. 未選択時は「選択してください」という文言をグレーで表示する
2. プルダウンを表示した際には、管理者、アシスタント、一般ユーザーのいずれかを選択できる。「選択してください」は選択肢に含めない。
3. 選択した場合は黒色で選択済み状態となる。

未選択時に「選択してください」という文言を表示する

promptもしくはinclude_blankを使うことで、未選択時に任意のテキストを表示するようにできます。

_form.html.erb

<%= form_with(略) do |f| %>
  <%= f.label :role %>
  <%= f.select :role, ['管理者', 'アシスタント', '一般ユーザー'], { prompt: '選択してください' }, required: true %>
<% end %>

include_blankを使う場合は以下です。

_form.html.erb

<%= form_with(略) do |f| %>
  <%= f.label :role %>
  <%= f.select :role, ['管理者', 'アシスタント', '一般ユーザー'], { include_blank: '選択してください'}, required: true %>
</div>

しかし、この状態だとプルダウンをクリックした際、「選択してください」も選択肢として表示されてしまいます。

選択肢から「選択してください」を消す

選択肢を「管理者、アシスタント、一般ユーザー」の３つにしたいです。
これを行うには、CSSを使います。

まず、今の状態がどのようなHTMLになっているかを確認します。

html

<select required="required" name="xxx" id="xxx">
<option value="">選択してください</option>
<option value="管理者">管理者</option>
<option value="アシスタント">アシスタント</option>
<option value="一般ユーザー">一般ユーザー</option></select>

これを見ると、optionタグでvalueが入っていないものを非表示にすればよさそうです。

css

select {
  option[value=""] {
    display: none;
  }
}

これで、「選択してください」が選択肢から消えました！

「選択してください」の文字だけグレーにしたい

今回はプレースホルダーっぽくしたいので、「選択してください」、が表示されているときは色をグレーにしたいです。
逆に、何かを選んだ時は黒色で表示したいです。

まず、今回の前提ですが、例に出しているRoleは選択必須の場合になります。
選択が任意のフォームの場合は、この方法は使えないと思うのでご了承ください。

選択必須のプルダウンでは、疑似要素:invalidで値が入っていない場合を判定できます。
したがって、CSSを次のように書きます。

css

select {
  &:invalid {
    color: grey
  }
  option[value=""] {
    display: none;
  }
}

これで選択されていないときに「選択してください」をグレーにすることができました！

何かの値が選択された場合は黒色になります。

最初はJavaScript使わないとかな、と思ったのですが、CSSだけで解決できたので勉強になりました。

参考

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