파일찾기 버튼을 이미지로
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<title>새 페이지 1</title>
</head>
<body>
<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="찾아보기zzz" 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="찾아보기qqqq" class="file_input_button" />
<input type="file" name="mb_1" class="file_input_hidden" onchange="javascript: document.getElementById('fileName1').value = this.value" />
</div>
</body>
</html>
출처는 잊어버림...
'Story > html/css' 카테고리의 다른 글
| Opera Mobile Emulator (0) | 2013.07.26 |
|---|---|
| HTML5를 이용하여 위치/좌표정보(GPS)를 사용하기 (0) | 2013.04.11 |
| 모바일 폰트 고정 (0) | 2013.04.05 |
| 모바일 웹 개발시 유용자료 (meta 설정 등등) (0) | 2013.03.22 |
| Messaging actions compatibility table (0) | 2013.03.14 |