[CSS] input autofill 스타일링 제거 방법

Chrome 브라우저 환경에서 input 필드를 작성하고 나면 다음부터는 해당 input에 내가 주지 않은 스타일 효과가 생긴다.

이를 autofill 이라고 하는데 브라우저에서 지원해주는 스타일로, 필요에 따라 그대로 사용할 수 있겠지만 디자인을 해칠 수 있기 때문에 대부분 이를 막는 편이다.

이 autofill 스타일을 제거하기 위해서는 -webkit-box-shadow, webkit-text-fill-color 속성을 이용해 제거해 주어야 한다.

input:-webkit-autofill {
   -webkit-box-shadow: #000; // 배경색 변경
   -webkit-text-fill-color: #fff // 글자색 변경
}

참고로 autofill을 제대로 없애기 위해서는

input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active

위와 같은 코드를 더해주면 된다.