[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>
중복이거나 올라온 자료라면 죄송^^;
<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개
13년 전
감사요 제가 스타일쪽이 약해서 ㅎ 좋은자료네요
12년 전
좋은 자료 감사드립니다
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3289 | 9년 전 | 4819 | ||
| 3288 | 9년 전 | 5803 | ||
| 3287 |
|
9년 전 | 3508 | |
| 3286 |
또치하우스
|
9년 전 | 12303 | |
| 3285 | 9년 전 | 11506 | ||
| 3284 |
다람쥐7마리
|
10년 전 | 4685 | |
| 3283 |
블랙초콜렛더블샷
|
10년 전 | 5974 | |
| 3282 |
또치하우스
|
10년 전 | 10272 | |
| 3281 | 10년 전 | 9789 | ||
| 3280 | 10년 전 | 4994 | ||
| 3279 | 10년 전 | 4275 | ||
| 3278 | 10년 전 | 5359 | ||
| 3277 |
|
10년 전 | 5268 | |
| 3276 | 10년 전 | 5781 | ||
| 3275 | 10년 전 | 4352 | ||
| 3274 | 10년 전 | 5595 | ||
| 3273 | 10년 전 | 6910 | ||
| 3272 | 10년 전 | 7223 | ||
| 3271 | 10년 전 | 4937 | ||
| 3270 |
|
10년 전 | 5406 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기