input file 찾아보기 버튼 image로 변경

[예제]

.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;
}

<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>​

 

 

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

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

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

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

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

 

출처: http://yangyag.tistory.com/277 [Hello Brother!]​