엠

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

· 2012-11-10 (토) 02:46:50 · 16571 · 2
기본적인걸 쓰려니 크롬에서 이상하게 보여서 구글에서 검색해서 찾은겁니다요 ㅎㅎ;;


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


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

댓글 2개

2012-11-21 (수) 04:58:06
감사요 제가 스타일쪽이 약해서 ㅎ 좋은자료네요
좋은 자료 감사드립니다
댓글을 작성하시려면 로그인이 필요합니다.

그누4 팁자료실

3,309건

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요. 나누면 즐거움이 커집니다.

+
제목 글쓴이 날짜 조회
12-11-29 조회 6,502
12-11-29 조회 1.9만
12-11-28 조회 9,959
12-11-27 조회 6,742
12-11-26 조회 5,446
12-11-23 조회 7,743
12-11-22 조회 4,439
12-11-21 조회 4.1만
12-11-21 조회 7,495
12-11-19 조회 1.1만
12-11-16 조회 1.3만
12-11-14 조회 7,770
12-11-12 조회 4,963
12-11-12 조회 1.7만
12-11-10 조회 5,834
12-11-10 조회 1.7만
12-11-08 조회 6,313
12-11-07 조회 4,581
12-11-07 조회 6,872
12-11-06 조회 1.6만