[CSS] chrome input 자동완성 autofill 없애기 (background-color, color)

chrome 브라우저에서는 input에 자동완성을 통해 입력하면 자동으로 input의 배경색, 글자색이 변경됩니다.

이는 chrome 브라우저의 기본설정이 다음과 같이 설정되어있기 때문입니다.

자동완성 시 변경되는 CSS

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: -internal-light-dark(black, white) !important;
}

:autofill 은 hover, active 등과 같이 선택자에 추가하는 의사 클래스로,

input 요소의 값이 자동으로 채워질 때 동작합니다.

 

📌 주의할 점

브라우저별로 기본 사용자 스타일이 적용되어 있는데 이 경우 !important 로 적용되어 있기 때문에 아무리 :autofill 을 이용해 제어하려고 해도 제어가 되지 않습니다. 

( 위 chrome의 기본설정에도 !important 가 적용되어 있습니다. )

 

background-color와 텍스트 color를 제어하는 방법은 

font color는 text-fill-color (비표준)을 이용, background-color는 box-shadow와 transition을 이용하는 것입니다.

( box-shadow와 transition 을 사용해 배경색을 투명하게 만드는 방법 .. )

( 만약 font color는 그대로 두고 background-color만 없애고 싶다면  text-fill-color는 사용하지 않고 box-shadow와 transition만 적용 )

 

 

최종적으로는 아래 코드를 입력해야 합니다.

이 설정은 input 뿐만 아니라 textarea, select에도 적용 가능합니다.

 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #fff !important;
}

 

 

 

---

참고링크

https://velog.io/@docchi/input-%ED%83%9C%EA%B7%B8-%EC%9E%90%EB%8F%99%EC%99%84%EC%84%B1-%EC%8B%9C-%EB%B0%B0%EA%B2%BD%EC%83%89-%EB%B3%80%EA%B2%BD