NeuroWhAI의 잡블로그

[HTML/CSS] input type="file" 버튼 커스텀 해서 바꾸기 본문

개발 및 공부

[HTML/CSS] input type="file" 버튼 커스텀 해서 바꾸기

NeuroWhAI 2018. 6. 20. 20:20


그냥 <input type="file" ...> 이렇게 하면 브라우저 마다 다른 모습으로 나오게 되는데
디자인 알못인 제가 봐도 구립니다.
그래서 커스텀 할 수 있는지 검색해봤는데 역시나 되더라고요.
label의 for 속성을 사용해서 label을 클릭해도 input이 클릭되도록 연동하는게 핵심입니다.

실제로 동작하는 예시:


코드와 디자인은 검색해서 봤던 코드를 썼는데 좀 밋밋해서

마우스 이벤트에 따라 색이 변하도록 제가 따로 넣었습니다.




Comments