0720-TIL-input type='file' 파일업로드 버튼 꾸미기

input type='file' 파일업로드 버튼 꾸미기

<label className="file" for="file">
파일찾기
</label>
<input id="file" type="file" accept="image/*" onChange={handleFileSelect} />

 

label 태그와 input 태그를 먼저 연결 시킨다.

 

input 태그에 id값을 지정하고,

label 태그에서 for로 지정한 id값으로 설정하면 된다!

 

 

기존에 설정되어있는 첨부하기 버튼을 없애기 위해서 css를 적용한다.

position은 필요할 경우에 지정하면 된다!

position: absolute;
width: 0;
height: 0;
padding: 0;
overflow: hidden;
border: 0;

 

 

그리고 label에 css를 적용한다.

font-size: medium;
font-weight: 400;
display: inline-block;
padding: 10px 20px;
color: #000;
background-color: var(--color_pink3);
cursor: pointer;
border-radius: 8px;
margin-left: 10px;
width: 60px;

 

 

이렇게 설정해주면 아래의 이미지처럼 파일 업로드 하는 부분을 마치 버튼을 둔 것 처럼 보이게 할 수 있다!

 

 

참고한 블로그

https://velog.io/@sklove96/inputtypefile-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0

input[type="file"] 커스텀하기