input file 디자인 입히기

업무중에 파일 업로드를 할경우가 있었는데

코딩된 디자인을 입히려는데 난해했다.

어떻게 할수 있을까 ?

검색을 한결과 좋은 것을 하나 발견하게 됐다.

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세계는 재밌고 흥미롭다.