업무중에 파일 업로드를 할경우가 있었는데
코딩된 디자인을 입히려는데 난해했다.
어떻게 할수 있을까 ?
검색을 한결과 좋은 것을 하나 발견하게 됐다.
http://www.quirksmode.org/dom/inputfile.html
위의 사이트에서 보면 스타일을 써서 fiel 컨트롤을 밑에다 그리고
그 위에다가 이미지를 입히는 형식으로 되어있었다.
간단한 코드 예제를 보겠다.
먼저 css파일에 다음과 같은 스탕일을 정의한다.
div.fileinputs ｛position: relative; height: 30px; width: 400px; } input.file ｛margin: 0; width: 400px; } input.file.hidden ｛position: relative; text-align: right;-moz-opacity: 0; filter: alpha(opacity: 0); opacity: 0; z-index: 2; }div.fakefile ｛ position: absolute; top: 0px; left: 0px; width: 400px; padding: 0; margin: 0; z-index: 1; line-height: 90%;}
그다음은 html에 코딩에선 아래와 같이 하면 된다.
<div class="fileinputs"> <input type="file" class="file hidden" id="file2" name="file2" /> <div class="fakefile"> <input class="iText w300" id="fileInput2"> <a class="button-medium" href="javascript:return;" id="btnFileSearch2"><strong>찾아보기</strong></a> </div></div>
좀 힘들수도 있지만 삽질을 해보면 간단하다...
참 css세계는 재밌고 흥미롭다.