[CSS] input type=file 찾아보기 버튼에 스타일 효과주기

기본적인걸 쓰려니 크롬에서 이상하게 보여서 구글에서 검색해서 찾은겁니다요 ㅎㅎ;;


<style type="text/css">
<!--
.file_input_textbox {float:left; width:200px; border:1px solid #cccccc; font-family:'dotum'; resize:none; line-height:14px;}
.file_input_div {position:relative; width:100px; height:23px; overflow: hidden;}
.file_input_button {width:100px; position:absolute;top:0px; background-color:#f8f8f8; color:#555555; border:1px solid #cccccc;}
.file_input_hidden {font-size:45px; position:absolute; right:0px; top:0px; opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0;}
-->
</style>



<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="찾아보기" class="file_input_button" />
<input type="file" name="mb_icon" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>



두개일때는 아래처럼 추가
<input type="text" id="fileName1" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="찾아보기" class="file_input_button" />
<input type="file" name="mb_1" class="file_input_hidden" onchange="javascript: document.getElementById('fileName1').value = this.value" />
</div>


중복이거나 올라온 자료라면 죄송^^;