2015.01.14 10:11 Edit
파일 찾아보기 관련 디자인버튼으로 작업할 때 개발, 접근성, 크로스 브라우징 관련 이슈사항들이 많습니다.
저는 파일 찾아보기 버튼이 디자인 되었을 때 아래 사이트와 같은 방법으로 작업을 합니다.
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 관련 상호항에 맞게 수정하시면 됩니다.
Powered by Textyle
Design & UI Develop By The RaiN Story