[HTML] input file

1. input file

<style type="text/css">
.eventWrap .inputFile{padding:23px 0 14px 227px;}
.eventWrap .inputFile:after{content:'';display:block;clear:both;}
.eventWrap .inputFile .file_input_textbox{float: left;width:405px;height:55px;line-height:55px;border:1px solid #ababab;border-width:1px 0 1px 1px;background:#f1f1f1;font-size:16px;}
.eventWrap .inputFile .file_input_div{position: relative;   width: 140px;   height: 57px;   overflow: hidden;text-align:left;}
.eventWrap .inputFile .file_input_button{width: 140px;height:57px;  position: absolute;  top: 0px; background:url('./images/btn_file_search.gif') no-repeat 0 0; color:#fff;text-indent:-9999px;border:none;}
.eventWrap .inputFile .file_input_div .file_input_hidden{width:546px;height:57px;  font-size: 23px;   position: absolute;   right: 0px;   top: 0px;   opacity: 0;filter: alpha(opacity=0);  -ms-filter: "alpha(opacity=0)";  -khtml-opacity: 0;  -moz-opacity: 0; }
</style>

<div class="inputFile">
<input id="fileName" class="file_input_textbox" readonly />

<div class="file_input_div">
<input type="button" value="Search files" class="file_input_button" />
<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>
</div>
<p class="txt_photo_info"><img src="./images/txt_photo_info.gif" alt="" /></p>

<p class="btn_photo_submit"><a href="#"><img src="./images/btn_photo_submit.gif" alt="" /></a></p>


2.
http://mcatcher3.cafe24.com/%ED%8C%8C%EC%9D%BC%EC%B2%A8%EB%B6%80%EB%B0%95%EC%8A%A4input-typefile-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B0%94%EA%BE%B8%EA%B8%B0/

html
<div class="fileBox">
<input type="text" class="fileName" readonly="readonly">
<label for="uploadBtn" class="btn_file">찾아보기</label>
<input type="file" id="uploadBtn" class="uploadBtn">
</div>

css
<div class="fileBox">
<input type="text" class="fileName" readonly="readonly">
<label for="uploadBtn" class="btn_file">찾아보기</label>
<input type="file" id="uploadBtn" class="uploadBtn">
</div>

js
<div class="fileBox">
<input type="text" class="fileName" readonly="readonly">
<label for="uploadBtn" class="btn_file">찾아보기</label>
<input type="file" id="uploadBtn" class="uploadBtn">
</div>

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading