[html] input="file" 버튼 이미지 변경하는 방법

html 버튼 이미지 변경

 

input="file" 버튼 이미지 변경하는 방법은

다음 소스를 추가함으로서 간단히 변경가능하다.

 

<span id="fileInputForm" style="position:relative; float:left; width:62px; height:18px; overflow:hidden; cursor:pointer; background-image:url('../images/table/add_search.png');"> <input type="file" id="filename" name="filename" value="" style='position：absolute; margin-left:-10px; width:62px; height:18px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; cursor:pointer;' onChange="fileUpload()"> </span>

 

background-image:url('../images/table/add_search.png'); //이미지가 있는 주소 경로입력

width와 height는 해당이미지 사이즈에 맞게 수정해준다.

 

소스적용시 경로가 나타나는 text박스없이 이미지 버튼만 생성된다.