Railsチュートリアルで作ったサンプルアプリの「ファイルを選択」ボタンをかっこよくしてみた - Qiita

環境 Windows10 Home ver.2004 ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32] Rails 6.1.0 はじめに Railsチュートリアルの13.4.1章では、サンプルアプリに画像付きマイクロポスト投稿機能を追加するのだが、デフォルトだと画像を選ぶ際にクリックする「ファイルを選択」ボタンがダサい他のボタンとの統一感のなさのせいで目立ってしまう。 この状況をなんとかしたいと思い、色々試してみた。 結果 デフォルトのボタンを非表示にした上で別のボタン「Choose an image」を用意し、そのボタン経由でデフォルトのボタンを押させることによって、機能を損なわずに見た目に統一感を出すことができた。 マウスオーバー処理も含め、下の「Post」ボタンのデザインをできる限り忠実に再現した。 もちろん、