[UI개발/HTML/CSS] input type file UI 버튼 커스터마이징 (input type="file" 스타일 css변경)

 

 

 

 

UI 화면을 만들면서 제일 많이 쓰는 것 중 하나가

바로 <input>이다.

 

 

그중에서도 파일을 업로드하고 다운로드하는 기능 등을 많이 구현하는데 
input 중에서도 input[type="file"]은 원하는 UI 형태로 만들려면
조금 공수가 들고 은근히 신경 쓰인다.

 

 

또! input box 안에다가 button을 넣고 싶은데

이게 여간 까다로운 일이 아니다.

 

 

이참에 정리해서 완전히 끝내버리자  :O

 

 

 

-

<input type="file">

 

 

<input> file 기본 형태 (html)

<input type="file" >

 

 

이렇게 type="file" 만 쓰면 기본 형식인

파일선택과 잘렸지만(아래 이미지 참고)

선택하된 파일 없음 이라는 text가 옆에 나온다.

 

 

 

<label> 태그의 for 속성으로 묶기 (html)

<label for="input-upload" class="btn-file">
	Upload
</label>
<input type="file" id="input-upload">

 

 

 

이것을 이제 그냥 input으로 쓰는 게 아니라 

<label>태그의 for 속성을 이용해서 

묶어서 사용하면 

이런 화면이 나온다. 

 

 

이때 클릭할 수 있는 box가 두 개나 나오는데

당황하지 말고~

 

 

커스텀 영역 이외 숨기기 (CSS)

input[type="file"] {
    display: none;
}

 

 

이렇게 display: none; 을 입력하면

우리가 커스텀 하고자 하는 Upload 버튼만 남는다.

 

 

 

파일 업로드를 위한 기능들은 <input>에 입력하고 

UI 커스텀은 label에서 하면 내가 원하는 대로 더 쉽게 

구현할 수 있다.

 

 

 

<label> class를 이용한 Upload 스타일 변경(CSS)

 

.btn-file {
    width: 74px;
    padding: 7px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    color: #61aaff;
    border: 2px solid #61aaff;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: none;
    cursor: pointer;
}

 

 

 

위 CSS는 예시일뿐

각자 원하는 스타일을 마음껏 작성하면 된다.

 

 

 

 

 

 

-

이 다음 포스팅으론 

input안에 button넣는 법과

input을 클릭하면 button이 사라지는 문제를 해결해 보자!