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


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

댓글 2개

감사요 제가 스타일쪽이 약해서 ㅎ 좋은자료네요
좋은 자료 감사드립니다
댓글을 작성하시려면 로그인이 필요합니다. 로그인

그누4 팁자료실

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

+
제목 글쓴이 날짜 조회
13년 전 조회 4,199
13년 전 조회 3.9만
13년 전 조회 7,171
13년 전 조회 1.1만
13년 전 조회 1.2만
13년 전 조회 7,190
13년 전 조회 4,681
13년 전 조회 1.6만
13년 전 조회 5,571
13년 전 조회 1.6만
13년 전 조회 6,050
13년 전 조회 4,303
13년 전 조회 6,626
13년 전 조회 1.6만
13년 전 조회 9,883
13년 전 조회 5,017
13년 전 조회 3,002
13년 전 조회 3,583
13년 전 조회 2,661
13년 전 조회 3,959
🐛 버그신고