【Rails・Tailwind】file_field使用時にボタンのデザインを変えてみよう！

はじめに

この記事の概要

こんにちは、株式会社TOKOS新入りのたくまです！
今回は、Railsでfile_fieldを使用する際、ファイル選択ボタンのデザインを変更する方法を紹介します。

Railsで画像ファイルを選択する際にfile_fieldを使用される方も多いと思います。
ただ、下記の画像のようなデフォルトのデザインをそのまま使うのは味気ないので、
「サイトに合わせたデザインにしたい！」と思うことはありませんか？

そんな時は、これから紹介する方法で思い通りのデザインに仕上げることが可能です！

対象読者

• Railsでfile_field使用の際にファイル選択ボタンのデザインを変更したい方
• Tailwindを勉強中の方

デザインを変更する

それでは早速、デザインを変更したいと思います！
今回はTailwindを使用してデザインを変更していきます。

デフォルトデザインの記述

クラスなど特に指定しないままの記述です。

<%= f.file_field :"#" %>

デザイン変更の記述

上記の記述に次の操作を行いましょう！

1. file_fieldタグをlabelタグで囲む
2. file_fieldタグとlabelタグの間に表示したい文字や画像を挿入する
3. file_fieldタグのclassはhiddenにしてlabelタグのclassにデザインを指定する

実際に記述するとこのようになります！

<label class="mt-2 sm:mt-0 py-2 w-[212px] sm:w-[164px] h-8 border border-primary-300 bg-white text-primary-300 rounded-[3px] text-xs flex justify-center items-center">
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="13"><path data-name="パス 204" d="M16.5 11.167a1.4 1.4 0 0 1-1.455 1.333H1.955A1.4 1.4 0 0 1 .5 11.167V3.833A1.4 1.4 0 0 1 1.955 2.5h2.909l1.455-2h4.364l1.455 2h2.909s1.453.6 1.453 1.333Z" fill="current" stroke="#0087e6" stroke-linecap="round" stroke-linejoin="round"/><path data-name="パス 205" d="M12.426 6.915a3.926 3.926 0 0 1-7.852 0 4.007 4.007 0 0 1 3.393-3.89 2.844 2.844 0 0 1 .533-.036 3.926 3.926 0 0 1 3.926 3.926Z" fill="current" stroke="#0087e6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span class="ml-5">画像を選択する</span>
  <%= f.file_field :"#", class: "hidden" %>
</label>

記述変更後のデザイン

上記の記述で表示されるファイル選択ボタンがこちらです！

無事、デザインが変更されました！
今回はカメラのアイコン画像を挿入したデザインに変更してみました。

ここをクリックすることで、問題なくファイルを選択することが出来ます。

ポイントはerbタグのclassをhiddenとすることで、デフォルトのデザインを消すことができます。
その後はlabelタグにclassを指定して、自分の思い通りのデザインになるよう記述していきましょう！

終わりに

今回はRailsでfile_fieldを使用する際に、ファイル選択ボタンのデザインを変更する方法を紹介しました。
上記の方法でサイトに合わせたデザインで作成することが可能になるので、ぜひお試しください！
また、Railsに関してもっと知識を深めたいという方は以下の書籍がおすすめです。
実務にも役立つ情報が多くあり、Rails初学者の方の手助けになってくれる一冊です。