商品投稿するときのファイル送信フォームをアイコンにする方法

実行環境

• html(今回、slimで書いています）
• scss

行いたいこと

このUIから...

こっちのUIみたいに装飾をして使いやすくしたい。
(グレーのところどこ押しても反応する）

実際にしたこと

example.html.slim

.service_page_r_form_image
  = f.label :image
     i.far.fa-file-image
  = f.file_field :image
  small 写真を１枚アップロードしてください。

html（slim)ではlabelとinput(file_field)を記述しています。

example.scss

&_image{
	height: 300px;
	label{
		 position: relative;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 height: 300px;
		 width: 100%;
		 background-color: #D3D3D3;
		 cursor: pointer;
		
		input{
		    display: none;
		}
      }
    }

すごく長々と書いていますが、やるべきことはinput(file_field)を**display: none;**して隠すことです。
隠しても、labelと紐づいているので、labelの部分を押せばinputの挙動が発動します。
あとはlabelの部分を自分の好みのように記述していけば、完成します。

まとめ

今回は、ファイル送信フォームの見た目の部分を装飾して改善をしました。
まだまだプレニュー表示など改善点はございますが、一旦はこれで以上になります。では。