230830) input 태그에 스타일 적용하기 (label이용)

사진처럼 프로필을 만들고 있는데, 회색 원 안에 카메라 이미지를 배치하고 해당 회색 원을 눌렀을 때 파일선택창이 나타나야 하는 상황이다.

예전에 다른 블로그에서 보ㅗㄱ, input아래 span 태그를 놓고 input을 display:none처리하면 가능하다는 정보를 얻었는데 그렇게 적용을 해도 왜인지 제대로 잘 되지 않았다.

결론적으로는 label 태그 안에 input 태그를 넣고, input을 display:none처리 함으로서 회색원(=label)태그 를 누르면 파일선택창이 열리겠끔 구현하는 데 성공하였다.

<label>
   <input type="file></input>
</label>

html 예시

& > label {
    width: 36px;
    height: 36px;
    cursor: pointer;
  }

  & > label > input {
    display: none;
  }

(styled-component 사용 중이어서 & > 로 자식 설정을 하고 있습니다! )

 

위와 같이 구현하면 input이 보이지 않으면서도 label 버튼을 눌렀을 때 정상적으로 input 태그가 작동합니다 :)

 

 

---

 

 

오늘도 잘 해냈다!