부스트코스 폼 파일찾기 커스텀 정리

부스트코스

폼 요소에서 input[type='file']은 커스텀 미리정해진 레이아웃이 있어서 커스텀 하기가 힘들다고 한다. 그래서 input[type='file']을 직접 커스텀하기보다 이 인풋요소를 opacity: 0;으로 스타일링하여 눈에 보이지 않게 하되 기능은 살려놓고 div, span 등의 스타일링 통해 버튼 모양을 만든다.

1. HTML 마크업으로 파일찾기 스타일링

먼저 div.file_form으로 파일찾기 버튼의 전체 윤곽을 잡는다.
그리고 내부 텍스트는 1줄 말줄임 처리를 하고
가상요소를 이용해서 버튼을 만들고 input[type='file']은 opacity: 0'을 이용해서 시각적으로만 보이지 않게 놔둔다.

2. 이미지를 이용한 파일찾기

<div class="file_form_img">
	<span class="img"><img src="./file/default.png" alt=""></span>
        <label class="file" for=""><input type="file"></label>
    </div>

.file_form_img{
    width: 100px;
}

.file_form_img .img{
    overflow: hidden;
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.file_form_img img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.file_form_img .file{
    position: relative;
    display: block;
    margin: 10px auto 0;
    background: url(./file/btn_file.jpg) no-repeat;
    width: 82px;
    height: 24px;
}

.file_form_img .file input[type='file']{
    position: absolute;
    z-index: 10;
    top: 0;right: 0; left: 0; bottom: 0;
    width: 100%;
    opacity: 0;
}

이것도 1번과 같은 방법으로 한다. input[type='file']은 opacity:0;으로 처리를 하고 대신 윤곽선을 잡고 백그라운드 이미지를 넣는다.