[CSS] :autofill - input 자동완성 스타일 제어하기

업무 중 input에 값 입력 시 불필요한 배경색이 적용된다는 qa가 올라와서 찾아보다 발견했다.

살펴보니 자동완성 값을 넣었을 때만 스타일링한 배경색이 아닌 다른 배경색이 들어가서 찾아보다 :autofill을 발견했다.

:autofill

브라우저에 의해 값이 자동 채워질 때 스타일을 제어하는 속성.

input:autofill {
  border: 5px solid #f00;
}

input:-webkit-autofill {
  border: 5px solid #f00;
}

 

 

⚠️ 주의할 점

많은 브라우저들이 user agent style에 :-webkit-autofill 스타일에 !important를 사용하여 적용해두었기 때문에

background-color, background-image, color 등의 스타일링이 어렵다.

 

그래서 color는 -webkit-text-fill-color, background-color는 box-shadow/transition을 이용해서

아래와 같이 커스텀을 한다.

 

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  border: 5px solid #f00;
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

 

🌎 브라우저 지원범위

- IE에서 지원 X

- https://caniuse.com/?search=%3Aautofill

 

📚 참고

- https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

- https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/