(Tag) input box 파일타입(file)의 찾아보기 버튼을 이미지로 바꾸는 편법 HTML_XML_CSS

input box 파일타입(file)의 찾아보기 버튼을 이미지로 바꾸는 편법.

제목을 '편법' 이라고 붙인 이유는, 원론적으로 '찾아보기' 버튼을 이미지로 바꿀 수 없기 때문이다.
웹에 떠돌아 다니는 여러가지 소스들을 분석해보고 테스트를 해보았지만,
동작을 시켰을때, '액세스가 거부되었습니다' 오류가 뜬다던가, 등록버튼을 두번 눌러야 동작한다던가 하는 이상작동을 하였다.

input 박스의 특성을 'file' 로 지정하면, '찾아보기' 라는 버튼이 나타나는데, 이 버튼은 없앨수가 없다.

<input type="file" style="width:300;">

라고 태그를 작성하면, 아래와 같이 출력된다.

위의 이미지처럼 '찾아보기...' 이란 글자를 가진 버튼이 생기는데, 이 버튼의 디자인을 조금 바꿔볼수는 있지만, 이미지로 대체할수는 없다.
아니, 이미지로 대체하는 방법은 있는데, 그렇게 하면 태그가 비정상적으로 작동하는 문제가 발생한다.

따라서, 원래의 버튼을 그대로 사용하되, 단지 눈에만 보이지 않게 교묘히 처리하는 방법을 사용해야 한다.


위와같은 방식으로 버튼을 처리하려고 한다.

아래와 같은 방법을 이용해보자.-----------------------------

<form name="form1" enctype="multipart/form-data" method="post">

<div style="position:relative;">

<div style="position:absolute;left:338px;top:1px;height:20px;width:74px;background-image:url('img/attach.gif');"></div>

<div style="position:absolute; left:0px; top:0px; height:30px; width:550px;">
<input type="text" id="viewurl" name="viewurl" value="" size="20" readonly style="border:1 solid #888888;width:330px;height:20;">
<input type="file" id="fileurl" name="fileurl" onChange="btnchg();" hidefocus value="" size="1" style="border:1 solid #FFFFFF; width:1px; filter:alpha(opacity=0);cursor:hand;">
</div>

<div style="position:absolute; left:420px; top:1px; height:20px; width:37px;">
<img border="0" src="img/cancel.gif" onClick="" style="cursor:hand;">
</div>

</div>

</form>
-------------------------------------------------------

소스를 설명해본다.

일단, 디자인을 위해 겉에 div 박스를 하나 두른다.
<div style="position:relative;"> 로 지정하면, 그 안에 div 를 다시 넣을때 absolute 로 지정해서 포지션을 지정할때, 가장 바깥의 div 를 기준으로 포지션을 0 에서 시작할 수 있다.

viewurl 이라는 아이디를 가진 text 박스는, 눈에 보이는 경로값을 표시하기 위해 별도로 추가한 박스다.

실제 file 속성의 박스는  filter:alpha(opacity=0); 속성으로 처리해서 눈에 보이지 않게 처리한다.
단지, 눈에만 보이지 않을뿐 해당 위치를 클릭할때 버튼이 눌린다.
(IE6, Chrome14 모두 정상작동)
박스를 숨겼으니, 해당 위치에 이미지 버튼이 보여야 하는데, 태그의 특성상 이미지 버튼을 먼저 처리해서 배경으로 깔아준것이다.
즉, 배경에 이미지 버튼이 보이는 상태인데, 실제 file 속성의 박스는 필터(filter) 스타일을 이용해 눈에 안보이게 감췄으니, 배경에 깔아준 이미지 버튼이 보일 뿐이다.
하지만, 해당 위치를 클릭하면, 배경의 이미지 버튼이 눌리는게 아니라, 눈에 안보이지만 그 위치에 자리잡고 있는 file 속성의 버튼이 눌리게 된다.

이렇게 하면, file 속성의 버튼을 그대로 사용하면서, 눈에만 안보이게 교묘히 감춰서 디자인을 처리할 수 있다.

※ 위에 소개한 소스는, 포지션 값이 정확하지 않을 수 있으므로, 실제 코드를 가져다 사용할때는 포지션을 정확히 맞춰서 사용해야 한다.



덧글

댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


통계 위젯 (화이트)

4091341
8822
10213868

google_myblogSearch_side

▷검색어

Flag Counter style2