input file 버튼 css 커스텀

input file은 각 브라우저마다 디자인이 조금씩 다르다.

그런 이유로 각 브라우저나 디바이스마다 모양이 틀어지거나 할 수 있는데

이를 방지하기 위해 해당 기능들을 직접 만들어 동일한 ui,ux를 제공하기 만들 수 있고

좀 더 이쁘거나 좋은 기능을 부여해서 만들 수도 있다.

 

뭐.. 여튼 옛날에 여러 버전으로 만들었었는데...

어디다 만들었는지 기억이 안나서 새로 만들기로 했다.

 

 

input file에 '파일선택' 텍스트에 해당되는 버튼 처럼 보이는것을 수정하려면 아래 처럼 쓰면 된다

 

::file-selector-button

::file-selector-button:hover

<input type="file">

input {
  border:1px solid #72b3ff;
  padding:5px;
  border-radius:8px;
  background:#fff;
}
input::file-selector-button{
  border:1px solid #72b3ff;
  padding:5px;
  border-radius:8px;
  background:fff;
  color:#72b3ff;
  transition:.2s;
}
input::file-selector-button:hover {
  background:#72b3ff;
  color:#fff;
}

 

 

색상을 파란색 톤으로 잡아보았다