👩🎨
tailwindでファイル選択ダイアログのデザイン変更
ローカルのファイルを選択するときにinput type=fileを使う人もいると思いますが、classを指定してもデフォルトだと画像のようにファイル選択するボタンのデザインをカスタマイズできません。なので、ボタンの文字の変更をしたいと思ってもできません。
<input type="file" class="p-6 bg-red-500" />
デザイン変更
tailwindを使ってデザインを変えていこうと思います。下記操作を行えばデザインの変更ができます。
- labelタグでinputタグを囲みます。
- labelタグとinputタグの間に表示させたい文字を入力します。
- inputタグのclassはhiddenにしてlabelタグのclassにデザインを指定します。
<label class="p-6 bg-red-500">
ファイル選択
<input class="hidden" type="file" />
</label>
無事、デザインが変わりました🎉
tailwindでデザイン変える方法は勉強中なので、いろいろ触ってみようと思います。
実行環境
参考
Discussion