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

3486 ワード
HTML CSS slim HTML テキストリンク

実行環境

  • 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の部分を自分の好みのように記述していけば、完成します。

まとめ

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