[CSS] input type=file 찾아보기 버튼에 스타일 효과주기 > 그누4 팁자료실

그누4 팁자료실

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

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

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


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

댓글 2개

전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT