[CSS] input 자동완성 배경컬러 없애기 - input:autofill

 

크롬에서 제공하는 자동완성 기능을 사용하면, 이렇게 input의 배경색이 파란색으로 바뀐다.

자동완성의 배경컬러를 없애기 위해서는 input:autofill에 스타일을 적용해주면 된다.

 

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

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

 

background-color로 속성을 적용하지 않는 이유는,

자동완성의 경우 크롬 브라우저의 기본값을 보면 background-color와 color에 important가 적용되어 있다.

그래서 box-shadow를 사용해서 큰 흰색 음영을 만들어서 배경색상을 덮어씌우는 식으로 적용한다.

그리고 background-color의 변화에 아주 긴 시간을 설정해서 사실상 보이지 않도록 하는 방법이다. 

 

 

 

참고

https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

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