input file 타입 찾아보기 버튼 image 로 변경 시키기

[그림 1]

<input type="file" /> 의 경우 일반적으로 [그림 1] 과 같이 찾아보기 버튼이 고정 되어 표시된다.

이는 브라우져 별로 고유 표시되는 형식이며 정상적으로 변경할 수 있는 방법이 없다.

하지만 약간의 트릭을 이용하여 저 찾아보기 버튼을 이미지로 변경 시킬 수 있다.

.file_input_textbox { float:left; height:29px; } .file_input_div { position:relative; width:80px; height:36px; overflow:hidden; } .file_input_img_btn { padding:0 0 0 5px; } .file_input_hidden { font-size:29px; position:absolute; right:0px; top:0px; opacity:0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); cursor:pointer; }

[CSS 구성]

<input type="text" id="fileName" class="file_input_textbox" readonly > <div class="file_input_div"> <img src="open.jpg" class="file_input_img_btn" alt="open" /> <input type="file" name="file_1" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value"/> </div>

[HTML 구성]

원리를 설명 하자면 텍스트 박스, 첨부파일 박스를 각각 따로두고 참부파일의 찾아보기 그 버튼의 opacity 값을 0으로 조정하여 

눈에 안보이게 만드는 것이다.

눈에 보이지는 않지만 클릭은 가능한 상태이므로 position 값을 absolute 로 조정하여 이미지 버튼에 얹혀놓는 것이다.

따라서 사람들은 이미지를 클릭 한것처럼 느끼겠지만 실은 눈에 안보이는 찾아보기 버튼을 누른것이다.

그리고 onchange 속성에 옆에 text 박스에 파일 경로 보이게끔 처리해놓으면 끝.

[완성된 화면]

※ 예제소스를 첨부한다.

예제 소스.zip