Input[type="file"] 커스터마이징

1. 마크업 하기

1) input 태그

input 태그에서 type="file"을 적용하고
style에 display : none을 적용합니다. (화면에서 사라지도록)

2) label 태그

(1) label 태그는 inline 요소이므로 display : block을 적용하여 너비를 적용할 수 있도록 합니다.

(2) width, height 값을 주어 기존 input[type="file"] 필드를 대체하도록 합니다.

(3) label 태그의 htmlFor와 input 태그의 id값을 일치시킵니다.

일치해야 label의 영역을 클릭시 파일을 선택하는 화면이 나타납니다.

<div>
 <FileLabel htmlFor="businessGubun"/>
 <Input id="businessGubun" type="file" style={{display : "none"}}/>
</div>                           

2. 스타일 적용

import DownloadImg from "../images/Download.png"
import styled from "@emotion/styled";

export const FileLabel = styled.label`
    width : 784px;
    height : 48px;

	// 하늘색 배경 
    background-color: #EAF2FF;


    display: block;
    border-radius : 12px;
    border : 1px solid var(--neutral-light-darkest, #C5C6CC);

	// 우측에 다운로드 이미지 배치
    background-image : url(${DownloadImg});
    background-repeat : no-repeat;
    background-position : 98% center;

3. 적용 결과