CSS

input type file CSS 바꾸기

gcpark 2018. 8. 9. 10:15
1
2
3
4
5
<div class="fileBox">
<input type="text" class="fileName" readonly="readonly">
<label for="uploadBtn" class="btn_file">찾아보기</label>
<input type="file" id="uploadBtn" class="uploadBtn">
</div>


1.div 로 감싸기


2. input file에서 버튼을 대신할 라벨 생성


3. input file 에서 경로부분을 대신할 input text 생성


4. css 에서 input file을 숨기고 라벨과 텍스트를 덮어쓰기


5. 스크립트로 file이 변경될때 이벤트로 text의 값 변경