Skip to content

파일 찾아보기(input type=”file”) 버튼 디자인

파일 찾아보기 관련 디자인버튼으로 작업할 때 개발, 접근성, 크로스 브라우징 관련 이슈사항들이 많습니다.
저는 파일 찾아보기 버튼이 디자인 되었을 때 아래 사이트와 같은 방법으로  작업을 합니다.


http://tiagoe.blogspot.kr/2010/01/css-style-typefile-tags.html


1. css

.file_input_textbox {float: left}
.file_input_div {position: relative; width: 100px; height: 23px; overflow: hidden;}
.file_input_button {width: 100px; position: absolute; top: 0px; background-color: #33BB00; color: #FFFFFF; border-style: solid;}
.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;}


2. html

<input type="text" id="fileName" class="file_input_textbox" readonly="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>


class 네임이나 css 관련 상호항에 맞게 수정하시면 됩니다.

comments 0

leave comments

Powered by Textyle

Design & UI Develop By The RaiN Story

Admin