제품을 게시할 때 파일 제출 양식을 아이콘으로 만드는 방법

실행 환경

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의 부분을 자신의 취향과 같이 기술해 가면, 완성합니다.

요약

이번에는 파일 제출 양식의 외형 부분을 장식하여 개선했습니다.
아직 프리뉴 표시등 개선점은 있습니다만, 일단은 이것으로 이상이 됩니다. 그럼.