css

CSS로 input type=file 에서 버튼 스타일 바꾸기

핑계/ editor

  • 3 comments
  • 19,973 views
  • 2017년 9월 15일

CSS만 사용해서 input type=file 버튼 스타일을 바꿔 보아요 ~

  웹에서 파일을 업로드하려면 input type=”file” 태그를 사용합니다.
아래 그림처럼 자동적으로 버튼이 생기고 파일브라우징이 가능합니다.

그런데 이 태그는 파일을 업로드하는 기능때문에 다른 input type과는 다르게 CSS로 스타일을 제어하는데 약간의 제약이 있습니다. 아무리 CSS를 변경해도 ‘찾아보기’, ‘파일선택’ 버튼모양이 변경되지 않습니다.

Markup



Common CSS

input {
  width: 200px;
  height: 100px;
  border-radius: 3px;
  font-weight: 600;
  border-color: transparent;
  font-size: 25px;
  background: hotpink;
  color: #fff;
 cursor: pointer;
}

– input 스타일을 공통적으로 배경색을 핫핑크로, 글자색을 화이트로 지정했는데,
    ‘input type=submit’에만 CSS가 적용된것을 볼 수 있습니다.

HTML5AROUND on html5around.com

 

  이럴 때 해결방법은 input type=”file” 태그 앞에 임의의 button tag 를 마크업 해놓고 input tag 를 투명하게 해서 안보이게 한다음에 원하는 스타일을 button tag에 대신 적용하면 됩니다.

Markup


  // button tag 추가
 // opacity:0 으로 처리

Common CSS

input {             /*input tag 공통 스타일*/
  width: 200px;
  height: 100px;
  border-radius: 3px;
  font-weight: 600;
  border-color: transparent;
  font-size: 25px;
  background: hotpink;
  color: #fff;
 cursor: pointer;
}
input.upload {  
  opacity: 0;       /*input type="file" tag 투명하게 처리*/
  position: relative;
}
button.replace {    /*button tag 에 원하는 스타일 적용*/
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 3px;
  font-weight: 600;
  border-color: transparent;
  font-size: 25px;
  background: hotpink;
  color: #fff;
  cursor: pointer;
}

HTML5AROUND on html5around.com

 

Javascript에 자신 있으신 분들은
JavaScript를 이용하여 input type=file 버튼을 다른 버튼으로 대체해보기
방법으로도 input type=file 버튼스타일을 변경해보세요~

핑계

댓글 먹고 살아요~

3
Leave a Reply

avatar
1 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
핑계중원의 나그네sgyeong Recent comment authors
newest oldest most voted
sgyeong
Guest
sgyeong

질문이있습니다. box와 input tag들의 사이즈를 width 100 height 30 정도로 작게하면 왜 커서가 pointer로 안변하는지 궁금합니다.

중원의 나그네
Guest
중원의 나그네

사이즈가 너무 작아졌을때 원래 input type=file의 영역과 replace영역이 맞지 않아 생기는 문제로 보입니다.
.replace의 position:absolute; 아래에
display:block;
z-index:1000;
식으로 추가하여 button 레이어를 확실히 위쪽으로 올려주면 해결되리라 생각됩니다.
이런 세밀한 문제를 찾아내시다니 대단하십니다. ~^^